»

 Будь в курсе событий:

gotovie resheniya css

Готовые решения на CSS
Готовые решения на CSS

Наконец-то созрел для небольшого урока. Напишем сегодня готовые решения, которые можно использовать при оформлении ваших собственных страниц.

Готовые решения на CSS

Всем привет. Наконец-то созрел для небольшого урока. Напишем сегодня готовые решения, которые можно использовать при оформлении ваших собственных страниц. Будем использовать тени Box Shadow, градиенты, вдавливание. Этот урок более менее поможет вам разнообразить внешний вид страницы. Вам не обязательно использовать на 100% именно мой готовый код, можете взять его только за основу и подстроить под свой сайт, так вы заметно выделите свои страницы среди прочих джимдовских сайтов. В общем главное экспериментировать и ничего не бояться.

Решение 1. Направления теней Box Shadow

Тень сверху
Тень справа
Тень снизу
Тень слева

 

css
/* Тень сверху */
.drop-shadow.top {
  box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}

/* Тень справа */
.drop-shadow.right {
  box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}

/* Тень снизу */
.drop-shadow.bottom {
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}

/* Тень слева */
.drop-shadow.left {
  box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}

Решение 2. Вписываем тени

Темная тень
Светлая тень
Внутренняя тень
Обводка

 

css
/* Темная тень */
.emphasize-dark {
  box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}

/* Светлая тень */
.emphasize-light {
  box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}

/* Внутренняя тень */
.emphasize-inset {
  box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}

/* Обводка */
.emphasize-border {
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}

Решение 3. Тиснение теней

Легкое тиснение
Сильное тиснение

 

css
/* Легкое тиснение */
.embossed-light {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Сильное тиснение */
.embossed-heavy {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.3),
    0 1px 1px rgba(255,255,255,0.9);
}

Решение 4. Градиенты

Светлый градиент
Темный градиент
Светлый радиальный
Темный радиальный

 

css
/* Светлый градиент */
.gradient-light-linear {
  background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.498039), rgba(255, 255, 255, 0));
}

/* Темный градиент */
.gradient-dark-linear {
  background-image:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.247059), rgba(0, 0, 0, 0));
}

/* Светлый радиальный */
.gradient-light-radial {
  background-image:-webkit-radial-gradient(50% 0px, circle farthest-corner, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}

/* Темный радиальный */
.gradient-dark-radial {
  background-image:-webkit-radial-gradient(50% 0px, circle farthest-corner, rgba(0, 0, 0, 0.14902), rgba(0, 0, 0, 0));
}

Заключение. Подведение итогов

В заключении хотелось бы дополнить, что для кроссбраузерности эффектов необходимо прописывать в коде строки не только для -webkit-, но так же: -moz-, -o-, -ms-.

Оставить комментарий

Комментарии: 1