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

перевод

Опубликовал на Хабре перевод популярной статьи, в которой описывается любопытный, а главное — работающий способ, мотивирующий достичь свою цель.

Каждый пункт меню (представлен в виде списка) представлен в виде ссылки с якорем, содержащий два тега 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);
}

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