.main-menu
&__link
position relative
overflow hidden
+before('')
display block
width 100%
height 4px
background-color $yellow
position absolute
top 50%
transform translateX(-116%)
z-index 1
.is-active
+before()
transform translateX(116%)
transition ease-in-out .6s(function() {
var link = $('.main-menu__link');
if(!link.hasClass('is-active')) {
link.mouseover(function(event) {
$(this).addClass('is-active')
})
link.mouseleave(function(event) {
var self = $(this);
setTimeout(function(){
self.removeClass('is-active')
},300);
});
}
})();<div class="clear_float"></div> Не очень хороший тон clear-fix::after {
content: '';
display: block;
clear: both;
height: 0px;
visibility: hidden;
}.clearfix::after {
content: "";
display: table;
clear: both;
}<select>
<option value="1">Выпадающий дропбокс</option>
</select>select {
padding: 5px;
}div {
width: 150px;
height: 150px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
div img {
width: 100%;
}Толковых курсов и онлайн школ , сомнительно
Попов индеец , рекомендую всю литературу издательства O'reilly media,
например:
CSS - Каскадные таблицы стилей. Подробное руководство.
Уроки в видео формате смотреть не рекомендую , так как зачастую подаётся изначально материал не правильно , структура, синтаксис , грубые ошибки , по которым вы будите учиться .
А вообще это дело наживное со временем всё уляжется методом проб и ошибок .
Больше читайте и практикуйте.
Если вам интересно что возможно по средствам CSS , гляньте мое видео :
CSS - Game Boy
p.s Видео записано не с целью обучения , в идее лежит чистый цсс ,
наглядное представление того , что пора бы перестать резать джепеги .