2 заметки с тегом

урок

Каждый пункт меню (представлен в виде списка) представлен в виде ссылки с якорем, содержащий два тега span и изображение.

<ul class="mh-menu">
    <li>
        <a href="#">
            <span>Art Director</span>
            <span>Henry James</span>
        </a>
        <img src="images/1.jpg" <"image01"/>
    </li>
    <!-- ... -->
</ul>

Зададим классу .mh-menu блочное отображение и зададим цвет фона rgba(255,255,255, 0.8). При наведение на элемент списка зададим светло-синий цвет(225,239,240, 0.4).

.mh-menu li:hover a{
    background: rgba(225,239,240, 0.4);
}

Цвет второго span элемента также будет меняться при наведении курсора, но нам надо чтобы каждый пункт окрашивался в разные цвета. Для этого зададим эффект плавного перехода цвета для каждого пункта с помощью селектора nth-child:

.mh-menu li a span:nth-child(2){
    /*...*/
    transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
    color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
    color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
    color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
    color: #8e7463;
}

Изображение будет сдвигаться в правую сторону, так что первоначально оно будет иметь нулевой отступ с левой стороны. Так же добавим эффект плавного перехода для прозрачности, котороые будет меняться от нуля до единицы.

.mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
    left: 300px;
    opacity: 1;
}

Вуаля, у нас получился интересный эффект выдвижения!
Убедитесь, что z-index у якорной ссылки больше чем у изображения, иначе изображение будет появляться под ним, а не над ним.

В качестве альтернативы, можно сделать, чтобы цвет фона якоря становился непрозрачным при наведении, то есть белым (второй пример) или был различным для каждого пункта (третий пример).

В демонстрации используются иллюстрации Bartosz Kosowski (CC BY-NC 3.0).

Источник урока

Box-shadow — мощное CSS свойство, которое поддерживается современными браузерами. С его помощью можно сделать действительно крутые вещи. Давайте начнем с основ свойства box-shadow и в итоге перейдем к рассмотрению псевдоэлементов ::before и ::after.

Основы

box-shadow:2px 2px 5px #000;
box-shadow:0px 0px 10px #000;

Внутренняя тень

box-shadow:inset 2px 2px 5px #000;

Размер тени

box-shadow:0px 0px 5px 10px #000;
box-shadow:0px 15px 10px -15px #000;
box-shadow:inset 0px 15px 10px -15px #000;

Мультибордер

box-shadow:0px 0px 0px 3px #bb0a0a,
           0px 0px 0px 6px #2e56bf,
           0px 0px 0px 9px #ea982e;

Псевдоэлементы ::before и ::after

С помощью псевдоэлементов ::before и ::after мы можем создать реалистичную тень не прибегая к использованию изображений. Взгляните на пример:

HTML

<div class="box11 shadow"&gt;&lt;/div>

CSS

.box11 {
	width: 300px;
	height: 100px;
	background: #ccc;
	border-radius: 10px;
	margin: 10px;
	display:inline-block;
}
.shadow {
	position: relative;
	max-width: 270px;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 
        0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow:before, .shadow:after {
	content:"";
	position:absolute;
	z-index:-1;
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
 	transform:rotate(-3deg);
}
.shadow:after {
	right:10px;
	left:auto;
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
}

Источник урока