CSS Dropdown Menu: How to Make It + HTML Tutorial
A dropdown menu contains a list of pages and subpages. Users can access its content by clicking on or hovering over the menu.
This design element reduces the clutter of buttons, links, and text which is useful for enhancing a website or an app’s user experience on small screens.
Keep reading as we will cover the steps to create a dropdown menu using HTML and CSS. You will also learn to apply styles to the newly built dropdown menu to match your project’s branding.
How to Create a CSS Dropdown Menu
This tutorial requires a text editor to create the HTML and CSS file containing the dropdown menu’s code. Alternatively, you can do this through the File Manager of your hosting control panel. The following dropdown menu guide will use the latter method.
Step 1. Create a File With HTML Code
To begin, create an HTML file for the actual dropdown menu content and syntax. Navigate to the File Manager from your hPanel dashboard and generate a new file called menu.html inside the public_html directory.
The menu.html file will contain the dropdown menu’s elements ‒ one parent element with five menu items. Each sub-menu will redirect users to different pages on your website.
Add the following code to the menu.html file:
The dropdown, mainmenubtn, and dropdown-child classes represent different HTML elements. CSS will use them to access a specific element and alter its design.
This is how the HTML menu will look without any CSS rules:
Pro Tip
Don’t forget to replace the links inside the href attributes with the URLs of your website pages and rename the sub-menus to reflect the actual page content.
Step 2. Add CSS and Create the Dropdown Effect
Now that you have HTML elements to work with, let’s create the dropdown effect and CSS rules for each of them.
Generate an internal stylesheet within the menu.html file by placing the following code inside the <style> element:
Pro Tip
In this example, the CSS styles are placed in the same HTML file (internal stylesheet). Use external CSS by linking the HTML document to a separate CSS file for easier modification.
The .mainmenubtn class name contains the CSS properties of the dropdown button. It sets the button’s background and font colors and omits the border. The cursor property dictates that the mouse cursor will change to the hand with the index finger extended symbol when hovering over the dropdown button.
Adding a hover selector to the .mainmenubtn class determines what the dropdown menu will look like when a user hovers over it.
The .dropdown class sets the dropdown menu’s position. In the above example, the CSS rules position the menu items under the parent menu. The inline-block property makes them appear without having a line break separating them.
The .dropdown-child class refers to the actual dropdown menu content. Using a display value of none makes the sub-menus invisible. .dropdown:hover .dropdown-child turns the entire element into a hoverable dropdown menu.
Pro Tip
Feel free to experiment with other CSS properties to get the desired design. You can even add JavaScript to create a responsive dropdown menu with dynamic animations.
Once you’re done, save and download the file. Here’s what the dropdown menu will look like when you open it on a web browser:
Examples of HTML and CSS Dropdown Menus
Plenty of modern CSS dropdown menu templates are available so you don’t have to code one from scratch. At the very least, they’re a great source of inspiration.
The following dropdown menu template by kkrueger utilizes HTML and CSS. Each parent menu smoothly expands on hover, creating a dynamic and memorable look for the web page.
Another example comes from Bhakti Pasaribu. He utilizes JavaScript to create an interactive dropdown menu. The options appear with a flip animation upon clicking the parent menu. Another animation replaces the parent menu with the selected option, creating a seamless transition effect. This dropdown menu template is simple and dynamic in a unique way.
Minimalism enthusiasts may like what Chris Ota has to offer. His collapsable menu is subtle and doesn’t hog too much space. Still, it places user experience at the forefront. You can easily replace the list item descriptions with icons, further strengthening your site’s branding.
If you’re looking for a more flashy menu with visual effects, we recommend checking out the Molten dropdown menu by Zealand. It utilizes CSS keyframe animations to create an eye-catching flickering flame around the navigation bar.
Recursive Hover Nav by sean_codes offers a mega menu solution without obstructing the site’s user experience. The multi-level dropdown menu is built using HTML, CSS, and JavaScript.
As your mouse hovers over the parent menu, the sub-menus appear with a slide transition animation. While it doesn’t have flashy effects like the other examples, this template is more practical when it comes to managing a menu with lots of content.
Pro Tip
When designing a dropdown menu, make sure to consider the site’s user experience. A beautifully made CSS dropdown menu doesn’t guarantee great usability. In most cases, less is more.
Conclusion
Having a dropdown menu makes it easier to design an effective user interface. It reduces the number of elements cluttering your web page and, with an appropriate design, enhances the site’s aesthetics.
You can create a dropdown menu from scratch using HTML, CSS, and JavaScript. Alternatively, adopt one of the many dropdown menu templates coded by professional designers and adjust it to your preference.
We hope this article has provided you with a better understanding of how to design a CSS dropdown menu. Good luck.
Linas started as a customer success agent and is now a full-stack web developer and Technical Team Lead at Hostinger. He is passionate about presenting people with top-notch technical solutions, but as much as he enjoys coding, he secretly dreams of becoming a rock star.
CSS Выпадающие (раскрывающиеся) списки
Создание выпадающего (раскрывающегося) списка с помощью CSS.
Демо: Пример выпадающего списка
Наведите курсор на примеры ниже:
Другое:
Основной выпадающий (раскрывающийся) список
Создайте раскрывающийся список, который появляется, когда пользователь наводит указатель мыши на элемент.
Пример
<style>
.dropdown <
position: relative;
display: inline-block;
>
.dropdown-content <
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
>
.dropdown:hover .dropdown-content <
display: block;
>
</style>
Объяснение примера
HTML) Используйте любой элемент, чтобы открыть выпадающий контент, например элемент <span> или <button>.
Используйте элемент контейнера (например, <div> ), чтобы создать выпадающий контент и добавить в него все, что вы хотите.
Оберните элемент <div> вокруг элементов, чтобы правильно разместить раскрывающийся контент с помощью CSS.
CSS). Класс .dropdown использует position: relative , который нужен, когда мы хотим, чтобы содержимое раскрывающегося списка размещалось прямо под кнопкой раскрывающегося списка (используя position: absolute ).
Класс .dropdown-content содержит фактический раскрывающийся контент. По умолчанию он скрыт и будет отображаться при наведении мыши (см. ниже). Обратите внимание, что для min-width установлено значение 160px. Можете изменить его.
Совет. Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же ширины, как и раскрывающаяся кнопка, установите для width значение 100% (и overflow:auto для включения прокрутки на маленьких экранах).
Вместо использования border мы использовали свойство CSS box-shadow , чтобы раскрывающееся меню выглядело как "карточка".
Селектор :hover используется для отображения раскрывающегося меню, когда пользователь наводит указатель мыши на раскрывающуюся кнопку.
Выпадающее меню
Создайте выпадающее меню, которое позволяет пользователю выбрать опцию из списка:
Этот пример похож на предыдущий, за исключением того, что мы добавляем ссылки в раскрывающемся списке и стилизуем их под стилизованную кнопку раскрывающегося списка:
Пример
<style>
/* Стилизация выпадающей кнопки */
.dropbtn <
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>
/* Контейнер <div> — необходимо разместить выпадающий контент */
.dropdown <
position: relative;
display: inline-block;
>
/* Выпадающий контент (скрыт по умолчанию) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Ссылки внутри выпадающего */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменить цвет выпадающих ссылок при наведении */
.dropdown-content a:hover
/* Показать выпадающее меню при наведении */
.dropdown:hover .dropdown-content <
display: block;
>
/* Изменить цвет фона кнопки выпадающего списка, когда отображается содержимое выпадающего списка. */
.dropdown:hover .dropbtn <
background-color: #3e8e41;
>
</style>
Выпадающий список HTML
Привет! В этой статье вас ожидают примеры выпадающих списков и меню на CSS и, кто бы мог подумать, HTML. Насчет использования JavaScript не уверен — попробуем обойтись без него.
Выпадающее меню со списком элементов на HTML
Вебмастера и блоггеры периодически сталкиваются с проблемой создания горизонтального меню, при наведении на родительские элементы которого будут показывать дочерние элементы.
Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).
Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.
Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:
Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:
Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.
Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:
Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!
Выпадающий при наведении список меню на HTML
И снова мы изобретаем меню на чистом CSS, без использования JS.
Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».
Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.
Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.
Перейдем к CSS. Код:
<style >
/* Обнуляю отступы и убираю маркеры у списков. */
ul , li {
margin : 0 ;
padding : 0 ;
list-style-type : none ;
}
/* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
# menu {
display : block ;
position : absolute ;
top : 20px ;
left : 20px ;
/* Задаю стили для блоков выпадающего списка. */
# menu > li {
display : inline-block ;
height : 20px ;
/* Считаем координаты относительно исходного места. */
position : relative ;
}
/* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
# menu > li > ul {
position : absolute ;
top : 20px ;
left : 10px ;
display : none ;
background-color : bisque ;
border-radius : 5px ;
width : 185px ;
font-size : 14px ;
padding : 10 0 10 10 ;
}
/* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
# menu > li : hover > ul {
display : block ;
}
</style >
Что хочу отметить дополнительно.
«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!
«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.
Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.
А значит для пользователей посещающих сайт с мобильных устройств вам понадобится отдельная реализация меню с выпадающим списком. Вот пожалуй и все в этой части статьи.
Как создать крутое выпадающее меню
Третье готовое, простое и функциональное решение для создания красивого горизонтального меню с выпадающим списком разнообразных элементов.
Концепция, как и прежде, до глубины души простая. Мы делаем горизонтальную иерархию разделов, используя ненумерованный список без маркеров, и затем оборачиваем в красивые стили.
Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.
Хотел немного его прокомментировать, да передумал еще раз взглянув на код — он чистый, ясный, красивый. Вроде все должно быть понятно.
Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков <ul> в крутое и удобное в использовании выпадающее меню с несколькими элементами.
Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.
CSS-код, помещенный в <head> страницы:
Готово! Финальный результат:
БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС
Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.
Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.
< ul class = "ddropdownn" >
< li class = "ddropdownn-top" >
< a class = "ddropdownn-top" href = "/" > Красноярский край < / a >
< ul class = "ddropdownn-inside" >
< li >< a href = "/" > Минусинск < / a >< / li >
< li >< a href = "/" > Ачинск < / a >< / li >
< li >< a href = "/" > Красноярск < / a >< / li >
< li >< a href = "/" > Железногорск < / a >< / li >
< li >< a href = "/" > Канск < / a >< / li >
< li >< a href = "/" > Норильск < / a >< / li >
< / ul >
< / li >
< li class = "ddropdownn-top" >
< a class = "ddropdownn-top" href = "/" > Свердловская область < / a >
< ul class = "ddropdownn-inside" >
< li >< a href = "/" > Екатеринбург < / a >< / li >
< li >< a href = "/" > Верхняя Пышма < / a >< / li >
< li >< a href = "/" > Нижний Тагил < / a >< / li >
< li >< a href = "/" > Первоуральск < / a >< / li >
< li >< a href = "/" > Асбест < / a >< / li >
< li >< a href = "/" > Каменск-Уральский < / a >< / li >
< / ul >
< / li >
< / ul >
CSS-код, который я поместил в <head>:
Результат (без наведения курсора):
Результат (при наведении курсора):
Итоги: скачать готовый html+css код выпадающего списка меню
Как вы могли убедиться на вышеприведенных примерах, выпадающий список без особых проблем делается на обычном HTML.
Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.
Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.
Как создать в CSS выпадающее меню?
От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.
План урока и разметка нашего меню
В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.
Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.
Тут есть важный момент, который заключается в том, что вам, возможно, не нужно каждый пункт делать выпадающим, а лишь некоторые. Без проблем, тогда в пунктах без выпадения просто не создаем вложенных списков.
Собственно, вот она, вся разметка:
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.
Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.
Отлично, разметка у нас готова, можно посмотреть на результат:
Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.
Пишем css-стили
Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.
Далее я пропишу общие стили для самого меню, а также для списков, чтобы убрать у них маркеры.
Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:
Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.
Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.
В любом случае, вышеприведенный код, я надеюсь, вы понимаете. Он заставляет пункты главного списка прижиматься к левому краю, так что все они встают в одну строку, хотя и являются блочными элементами. Также я задал им явную ширину и относительное позиционирование.
Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.
Тем временем, вот что у нас уже получилось:
По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.
Далее мы с вами преобразим внешний вид нашего меню. Вот такие стили для этого я прописал ссылкам:
Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.
Все эти параметры не обязательно прописывать так, как это сделал я. Цвета вы можете выбрать произвольно, рамку сделать другую или вообще не использовать, отступы можно уменьшать или увеличивать.
Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:
Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.
Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.
Теперь мы видим на веб-странице только основное меню, что нам и нужно.
Реализуем выпадение
Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:
Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.
Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:
Все, проблема решена:
Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.
Переделываем меню в вертикальное
Ну хорошо, с горизонтальной навигацией мы с вами полностью разобрались, но ведь помимо нее на сайтах очень часто встречается и вертикальная и она тоже может быть выпадающей. На самом деле переделать меню с горизонтального на вертикальное очень легко, нам придется изменить буквально пару строк кода.
Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?
Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:
То есть необходимо прописать две координаты вместо одной. Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке пункты вложенных меню должны отображаться под основными пунктами. В случае с вертикальным меню это не подходит – пункты должны отображаться сбоку.
Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.
Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.
Горизонтальное меню с несколькими уровнями
Используя примерно такой же подход вы можете создать больше уровней меню, если это сильно необходимо. Например, давайте создадим для четвертого пункта главного меню список, который будет вложен в один из подпунктов.
Опять же, разметка превращается в громоздкую и непонятную, но если вы будете внимательным, то увидите, в чем здесь вся суть. Далее работаем с css:
Соответственно, убираем вложенное меню третьего уровня с экрана, делаем ему абсолютное позиционирование и прописываем такие координаты, как в случае с вертикальным меню. То есть данный список будет отображаться при наведении на первый подпункт четвертого пункта и будет отображаться сбоку.
Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?
Что ж, если вам нужно меню трех уровней, то придется убирать у second абсолютное позиционирование, а у главных пунктов убирать относительное. Вся фишка в том, что в случае с горизонтальным меню это никак не повлияет на отображение навигации – подпункты по-прежнему будут располагаться под главным пунктом при наведении на него.
Зато после этих изменений вы сможете добавить меню для каждого подпункта. Опять же, необязательно оно должно отображаться сбоку, это всего лишь моя идея, вы можете отображать его под подпунктом при наведении на него. Тогда вообще никакого позиционирования не понадобится!
В общем, итог таков:
При наведении на пункт 4 появляется первое выпадающее меню, при наведении на первый подпункт появляется отдельное меню для него, которое расположено сбоку. У других подпунктов такое меню не отображается, так как мы не создавали его в html-разметке.
Я думаю, вам понятно общая концепция. Если вы смогли разобраться, то уже самостоятельно сможете создать нужное вам выпадающее меню и самостоятельно решить проблемы, если это возможно в рамках css.
В общем, вам главное понять, как правильно позиционировать вложенное меню, а также как непосредственно реализовывается выпадение. Надеюсь, из этой статьи вы это поняли и теперь самостоятельно на чистом css сможете делать такую навигацию. Мы с вами узнали, как сделать выпадающее меню.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Много других очень интересных возможностей css вы можете узнать в нашем премиум-курсе по новым фишкам css3. Там вы научитесь делать градиенты, работать с новыми селекторами, создавать тени и т.д. Если вам нравится css, то точно понравится эта серия уроков. Ну а я на этом прощаюсь с вами.