CSS уроки. Анимация в CSS3. Часть 1
���� Обучение веб-разработке: http://webcademy.ru/htmlstart/.
За 2 месяца научим создавать веб-сайты и зарабатывать на этом, используя передовые технологии HTML/CSS/JS/PHP/MySQL..
�� возможна рассрочка.
�� если курс не понравится, вернём деньги в первую неделю..
Нужна консультация? → https://vk.com/webcademy.
�� Бесплатный курс «Создай свой первый сайт на HTML5 и CSS3» 7 уроков по 30 мин: http://webcademy.ru/htmlsite/.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Видео урок про создание анимации в CSS3. Часть 1..
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
�� Курс «Профессия HTML Верстальщик»: http://webcademy.ru/htmlstart/.
�� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/.
�� Сайт школы: http://webcademy.ru.
�� Наша Группа Вконтакте: https://vk.com/webcademy.
�� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat
Видео взято с канала: Школа веб-разработки WebCademy
Как легко сделать горизонтальное меню HTML CSS (За 5 минут)
Лучше посмотрите этот ролик ( Горизонтальное меню для начинающих! HTML CSS https://youtu.be/K6X4GQXw-F0 )
Видео взято с канала: GOOD LUCK
Как создать файл стилей CSS.
Больше уроков по работе с технологией CSS здесь:
https://webkyrs.info/page/vvedenie
Видео взято с канала: Веб-программист. Дмитрий Ченгаев.
Как подключить CSS к HTML странице. 3 способа
В видео рассматриваются 3 основных способа, как можно подключить CSS к HTML-странице..
Весь курс «Фундамент CSS» находится здесь:
https://webkyrs.info/category/fundament-css
Видео взято с канала: Веб-программист. Дмитрий Ченгаев.
Курс HTML/CSS. Выносим CSS-стили в отдельный файл style.css
Из этого видео вы узнаете:
для чего нужна каскадная таблица стилей CSS.
как вынести CSS-стили в отдельный файл и для чего это нужно.
как создать структуру каталогов сайта.
**********************************************************.
С чего начать изучение веб-программирование новичку? Какие НАВЫКИ программирования освоить в ПЕРВУЮ очередь, чтобы получить практические результаты и заказы? узнайте здесь https://fructcode.com/ru/blog/how-to-start-learning-programming-step-one-html-css/?utm_source=yt&utm_medium=yt_fc&utm_campaign=yt_fc.
ПОЛНЫЙ КУРС ПО РАЗРАБОТКЕ САЙТОВ от новичка до профи ПРОФЕССИЯ ВЕБ-ПРОГРАММИСТ. Курс построен из шести взаимосвязанных модулей, подходит и для начинающих:
1. HTML/CSS. Адаптивная верстка сайтов. Основные HTML-теги, CSS-стили и создадите верстку сайта Киномонстр..
2. Верстка на фреймворке Bootstrap. Фреймворк это по сути конструктор, с помощью которого, вы сможете создавать верстку любого веб-сайта в разы быстрее, чем в с помощью классического HTML/CSS..
3. Язык программирования PHP и база данных MySQL. Базовый фундамент для профессионального программиста..
4. Основы операционной системы Linux и контроля-версий кода GIT. Знания необходимые для командной работы..
5. Фреймворк Codeigniter. Запрограммируйте ваш веб-сайт + адаптивная верстка на Bootstrap..
6. Язык программирования Javascript и библиотеки jQuery. Как сделать сайт более оживленным и быстрым..
Программирование увлекательное занятие, которое может освоить каждый!.
Узнайте подробнее здесь https://fructcode.com/ru/?utm_source=yt&utm_medium=yt_fc&utm_campaign=yt_fc
Видео взято с канала: FructCode
Сделать файл css для html
Сделать простой файл css – это очень просто! Как вообще сделать файл css или как сделать файл css для html это все из одной области.
Звук записан на микрофон: http://marrex.ru/sht/tascam_dr_05.html.
Помочь проекту DwWeb.Ru https://yasobe.ru/na/DwWeb.
И уже чуть продвинутым кажется, что тупее, чем эта тема не найти! Но если вы только начинаете, то это совсем не так – когда простые вещи кажутся такими страшными заморочками!.
И из-за этого я решил сделать свой сайт и канал,.
потому, что мне очень все это тяжело давалось в начале!
Есть множество способов сделать файл #css. Это может быть простой текстовый блокнот, можно сделать файл #css вообще без программы, либо же это будет специализированная программа..
Давайте начнем с самого простого.
зайдем в какую-то папку, где и будем сохранять наш файл #css.
Нажимаем правой кнопкой мыши по полю и выбираем создать текстовый документ..
Пишем какое-то название и изменам расширение на #css.
Ну вот наш файл #css готов..
Давайте его удалим..
И существуют специализированные программы, которые специально заточены под редактирование кода. Не знаю почему, но мне, пока,.
на момент записи данного видео.
больше всего нравится, например, Sublime Text 3. Ссылки внизу..
Отроем эту программу. Напишем например в ней #css и заэкранирует этот текст..
В начале ставим слеш потом знак умножения а в конце обратный порядок.
Ну и дальше нам нужно его сохранить как.
– друзья я не иду в меню и не ищу сохранить как, а просто нажимаю сочетание клавиш ctrl + S..
Скопировать название.
Ну и далее нам остается данный файл #css загрузить на сервер и посмотреть, как он там уже и поживает!
Сперва откроем тестовую страницу и.. показалось оповещение – это мы в прошлый раз говорили об алерт в яваскриптах..
И следующим шагом будет – это прикрепление нашего файла стилей к какому-то файлу, к примеру, вот к этому файлу. Который вы видите на экране..
Ну чтож.
Вот такое очередное, короткое видео!
Не забудь подписаться!
До следующего видео!
Всем удачи и всем пока!
http://dwweb.ru/page/css.
http://dwweb.ru/page/sublime_text_3.
#CSS.
#CSSфайл.
#CSSдокумент.
#CSSсделать.
#CSSкаксделатьcssфайл.
#каксделатьcssфайлдля html
Видео взято с канала: DWWEB.RU
Формы CSS / Как создать форму в CSS3
Исходный код http://bit.ly/2pvLBjL.
В рамках данного видео покажу как сделать красивую #форму входа на сайт при помощи #css..
Задействуем #анимацию элементов при наведении (transition), подключим #шрифтовые иконки css, узнаете как задавать прозрачность элементам при помощи (rgba), о всем этом смотрите в видео уроке «Форма CSS»..
Подписка на канал https://dwstroy.ru/dwstv.
Обсуждение видео: https://youtu.be/INb7QmuKmTc.
#Видео сборникhttps://dwstroy.ru/S126H.
*Видео метки*:
[00:25] Описываем каркас в html.
[01:10] Стилизация формы CSS3.
[04:25] Прозрачный фон (rgba).
[05:07] Добавляем шрифтовые иконки.
*Другие видео на канале DWSTV*:
Сайт с нуля https://dwstroy.ru/7KNnM.
Уроки по CSS https://dwstroy.ru/paoBU.
1С Битрикс работа с сайтом https://dwstroy.ru/dEG4q.
Управление системой Битрикс https://dwstroy.ru/Zdt4K.
Настройки сайта 1С Битрикс https://dwstroy.ru/t0UVZ.
Во время урока я использую:
Документацию по #CSS3.
Редактор PhpStorm.
Ссылки из урока:
Архив каркаса и шрифтов https://dwstroy.ru/WNpGP.
Сервис цветов https://www.w3schools.com.
Шрифтовые иконки http://fontawesome.io.
Использую музыку:.
Elektronomia Limitless [NCS Release].
Tobu Life [NCS Release].
https://www.youtube.com/user/NoCopyrightSounds.
http://soundcloud.com/nocopyrightsounds.
Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/.
Канал в VK автора уроков: https://vk.com/dwstv.
Канал группы в VK: https://dwstroy.ru/MJM28.
Мы очень рады если видео по CSS было Вам полезно, хотите «поблагодарить» жмите кнопку «нравится» и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки по #1С битрикс.
Видео взято с канала: Денис Горелов
Нет похожих статей
Наконец то я нашла крутое видео а главное понятное, с кодом.
Огромное спасибо, только с этим видео я поняла эту тему. Я согласна конечно что всё это очень просто, но когда просто пишут код и показывают результат никак не комментируя свои действия просто невозможно запомнить. Ещё раз СПАСИБО за классный видеоурок.
Спасибо тебе огромное мужик, только начинаю изучать программирование и верстку, мне сейчас 14 лет, пока что всё схватываю на лету. Только вот вопрос: сделать сайт я сделал, но он у меня хранится на компьютере, а не в интернете, как опубликовать его чтобы все видели? Заранее спасибо)
Денис ты просто крут. Профи и лайк за видео. Только очень быстро все) не успевал мой мозг переварить быстрый поток информации, приходилось отматывать назад, чтобы повторно прослушать и вникнуть в мыслю) Однозначно подписка и лайк. Спасибо за проделанный труд…
неплохо всё расписано -вот только для кого? красивая форма обратной связи со своим css у вас вряд ли получится. возмите бутстраповские стили и сделайте форму через qform24.com. включаете галочку «использовать стили сайта» прописывается нужные бутстраповские классы в сервисе и вуаля.
Отличный способ ничему не научить новичка. «Для удобства обернем каждый input в div». Не для удобства мы его оборачиваем, а потому что для не обернутого в блок input не получится задать псевдокласс before. На мой взгляд на таких моментах надо делать акцент. Иначе у зрителя возникнет больше вопросов, чем ответов.
А как сделать меню из стилизованных красивых дизайнерских кнопок? Ну которые ты сначала рисуешь, например, в фотошопе(ну или скачиваешь в интернете), пишешь на самой кнопке её название, например, «Контакты». И потом, как сделать меню в шапке сайта из таких кнопок, что бы была активна сама кнопка, а не слово-ссылка в ней?
вот мой получше
Качественно сработано. Респект.
Для тех, начинающих, кто ниже сетует на слишком высокую скорость воспроизведения. Кликните в нижней строке окна, ниже видео, на изображение шестеренки с красным квадратом и надписью HD над ней. Она четвертая справа, при наведении на неё всплывает надпись «Настройки». Выберите пункт «Скорость воспроизведения» и в выпадающем списке выберите любой удобный вам вариант скорости воспроизведения, вплоть до 0.25 от нормальной скорости.
я в этом деле конечно новичок, но не разумнее было бы не делать элементы меню через ul и li, а просто накидать тегов а? Тогда можно было б не через глючный float размещать, а через
display: flex;
justify-content: space-between;
В PHP Storm’е есть встроенная фича конвертирования форматов цветов при курсоре на цвете появляется лампочка, если на неё нажать, то там будут предложения по конвертированию. Можно вызвать эти подсказки клавишами Alt + Enter. Т.е. это можно было сделать в два клика. Лично я этим пользуюсь, чтобы конвертировать HEX в RGB, а затем допиливаю в RGBA.
Можно сделать вот так…
nav {
width: 500px;
margin: 0 auto;
}
nav:before {
content: »;
display: block;
height: 50px;
width: 100%;
background: #ffffff;
position: absolute;
left: 0;
z-index:-1;
}
ul {
margin: 0;
padding: 0;
list-style: none;
height: 50px;
}
ul li {
float: left;
}
ul li a {
color: #000000;
display: block;
height: 50px;
padding: 0 30px;
text-transform: uppercase;
text-decoration: none;
line-height: 50px;
}
ul li a:hover {
background: #dcdcdc;
font-size: 17px
}
Спасибо большое за проделанную работу, если можно расписывать код полностью,
например:
border-bottom: 4px;
border-bottom-style: solid;
border-bottom-color: #6ee9fd;
, а не:
border-bottom: 4px solid #6ee9fd;
или
box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35);
мне как новичку в этом деле, сложновато понять весь код.
Я уже около месяца тринеруюсь и только сейчас начал думать, как мне авторизацию сделать покрасивше. Объясняете то хорошо, но мне показалось что скорость объяснения очень высока. Надеюсь автор нормально относится к критике) удачи вам и здоровья в текущей ситуации
Хлопцы, прошу помогите!
Компьютера и ноутбука у меня нет, но есть телефон. Проблема: когда я пытаюсь добавить картинку в html файл(картинка в той же папке) то html попросту не видит ее, как будто неправильная ссылка. Тоже самое с css файлом. Кто нибудь знает, что с этим делать?
не подключаются иконки. Всё сделал как в видео, но, допустим, когда пишу фонт-фэмэли еммет не предлагает вариант «ФонтЭйвсом», пишу вручную иконки не подгружаются( Но когда в шапке писал путь к файлу фонтэйвсом.цсс еммет предложил автозаполнение
Плз помогите кто-нибудь. Я не могу найти нужный мне пример меню. Хочу чтобы меню 1.было вертикал. 2. например когда нажимаешь на один из пунктов остальные опускаются под него а под ним появляется менюшка с под-категориями. Заранее спасибо за ответ
Делаю все как в видео но ничего не получается. Создал папку www. В нее положил index.html и папку css с style.css в ней. Переписал в index.html и style.css все точ в точ как в видео (использовал Atom). Синтаксис у меня, почему-то, подсвечивается немного другими цветами. Запускаю index.html в chrome или safari белый лист. Что делать?
Боже, я только начинаю постигать языки разметки и хочу сказать то что ты был послан мне свыше. Ибо я столько времени потратил чтобы понять как делается header, ещё раз спасибо тебе большое. Надеюсь ты не забросишь это дело
Программирование идеальное ХОББИ, почему?
Большинство работодателей высоко ЦЕНЯТ сотрудников, имеющих хотя бы базовые знания программирования.Начни обучение прямо сейчас с FructCode.com и благодарим за репост друзьям
CSS-код из ролика для тех, кому лень писать:)
nav {
width:1280px;
margin: 0 auto;
}
nav:before{
content:»;
display:block;
height:50px;
width:100%;
background:#000;
position:absolute;
left:0;
z-index:-1;
}
ul{
margin:0;
padding:0;
list-style:none;
height:50px;
}
ul li{
float:left;
}
ul li a{
color:#fff;
display:block;
height:50px;
padding:0 30px;
text-transform:uppercase;
text-decoration:none;
line-height:50px;
}
ul li a:hover{
background:#d34d43;
}
ну а кнопка вход не работает же я не могу видео найти чтоб обьяснили что написать чтоб кнопка заработала я по своему когда писал она работала и я щяс так магу зделать но когда я написал там просто тупа на главную страницу кидает когда пишешь это и там всё равно не чего нет там как и было написано вход и регистрация так там и написано
Спасибо за то, что вы сделали для всех люди смогут создавать свои сайты на вашем примере. Может вы что-то слышали об уже готовой сборке https://neoseo.com.ua/internet-magazin-seo-magazin-model? Поделитесь опытом?
Ребят как сделать так чтоб текскт мог быть в ЛЮБОЙ точке сайта, например: я хочу чтоб текс шел право, но так чтоб он не был на середине и на самом правом конце, а так же он должен быть внизу, вот я подумал что анимацией так можно добится, но сейчас я неуверен( я у же смотрел что-то подобное, но так и не понял как делать)
body {
position: relative;
top: 155px;
left: 500px;
}
h1{
position: relative;
top: 20px;
color: forestgreen;
}
.square {
width:100px;
height:100px;
background-color: darkslateblue;
animation-name: spin;
animation-duration: 2s;
}
@keyframes spin{
0%{
transform: rotate (0deg);
}
100%{
transform: rotate (360deg);
}
}
Знающие, скажите, пожалуйста, почему не центрируется меню?
align-items: center ровняет по вертикали, как я понял, а нужно ещё по горизонтали. Как?
css:
* {
box-sizing:border-box;
margin:0;
padding:0;
}
li, a {
font-family: Arial, sans-serif;
color: #cccccc;
text-decoration: none;
}
header {
display:flex;
justify-content: space-betwen;
align-items: center;
padding: 30px 10%;
height:50px;
background-color: #000;
}
.menu {
list-style: none;
}
.menu li {
display:inline-block;
padding: 20px 40px;
}
Я замутил похожую штуку (основываясь, конечно):
nav {
width: 1280px;
margin: 0 auto;
padding: 20px;}
nav:before {
content: »;
display: block;
width: 100%;
height: 50px;
left: 0;
position: absolute;
background: rgba(5,1,21,0.8);
z-index: -1;
}
nav ul {
list-style: none;
height: 50px;
}
nav li {
float: left;
margin: 0 15px;
background-color: rgba(29, 5, 18, 0.98);
border-radius: 5px;
opacity: 0.5;
transition: 1s;
font-weight: bold;
}
nav a {
color: #FD9590;
display: block;
height: 50px;
padding: 0 30px;
line-height: 50px;
text-decoration: none;
text-transform: uppercase;
}
nav li:hover {
transition: 0s;
opacity: 1;
}