В этом топике представлены лаконичные базовые стили для различных элементов: кнопок, ссылок, форм, теней, градиентов, которые можно использовать в своих проектах. Да и просто разобраться в принципах работы таких конструкций проще на несложных примерах.
![](https://habrastorage.org/r/w1560/storage2/db9/6c3/9f6/db96c39f6e7f2a508c6d192d88bcde66.png)
Демонстрация стилей / Скачать исходники
В примерах базовая конструкция блока выглядит так:
Блок отбрасывает тень в разные стороны:
![](https://habrastorage.org/r/w780q1/storage2/d58/5d6/1b4/d585d61b4e9c4d506fae62ef9649b60f.jpg)
Выделение блока тенью:
![](https://habrastorage.org/r/w780q1/storage2/117/3b2/d91/1173b2d91e56f4540aabfb6b645816ff.jpg)
Выпуклые блоки:
![](https://habrastorage.org/r/w780q1/storage2/936/bc8/94d/936bc894d7cc333c1c3bb02e4c439937.jpg)
Разные типы градиентов:
![](https://habrastorage.org/r/w780q1/storage2/ae7/4a8/b45/ae74a8b4533af80b7854ea27af5f4889.jpg)
![](https://habrastorage.org/r/w780q1/storage2/969/fc6/2a4/969fc62a491611aa4555d6d701a34789.jpg)
Базовая конструкция:
Несколько примеров стилей для ссылки в тексте:
![](https://habrastorage.org/r/w780q1/storage2/247/705/d9b/247705d9bf0571a1ffa72ec45b84eb6a.jpg)
![](https://habrastorage.org/r/w780q1/storage2/f14/fe8/5b9/f14fe85b9a88b8ce6b04c59e1e105ff2.jpg)
![](https://habrastorage.org/r/w780q1/storage2/f82/54d/cce/f8254dcce92b1ba3eddd5be42066a1e2.jpg)
Ссылка в Metro-стиле:
![](https://habrastorage.org/r/w780q1/storage2/3f7/6bd/11a/3f76bd11ae2059d94edc2db7fee0f180.jpg)
Ссылка с обводкой:
![](https://habrastorage.org/r/w780q1/storage2/83a/fbd/a57/83afbda57a1cc4edc4a4b72807019539.jpg)
Красивые кнопочки:
![](https://habrastorage.org/r/w780q1/storage2/dab/810/a0f/dab810a0f34c246269b6fb5be1d99e53.jpg)
Основная конструкция:
Добавляет border-radius по клику:
![](https://habrastorage.org/r/w780q1/storage2/aab/c05/2d0/aabc052d0529001f172b38f506b51667.jpg)
Повторяет iOS инпуты:
![](https://habrastorage.org/r/w780q1/storage2/e30/1d5/a6f/e301d5a6f6bc5352e86a7ce6a7ec58fa.jpg)
С градиентом:
![](https://habrastorage.org/r/w780q1/storage2/810/45d/d40/81045dd40ba4a970d1876d4108c5d6c5.jpg)
Вместо формы ввода просто линия:
![](https://habrastorage.org/r/w780q1/storage2/325/40c/586/32540c58616fb2cccfd5e09e049461f9.jpg)
Примеры взяты из статьи Basic Ready-to-Use CSS Styles.
![](https://habrastorage.org/storage2/db9/6c3/9f6/db96c39f6e7f2a508c6d192d88bcde66.png)
Демонстрация стилей / Скачать исходники
Базовая конструкция
В примерах базовая конструкция блока выглядит так:
<div class="block-level"></div>
.block-level {
width: 120px;
height: 120px;
margin: 20px;
position: relative;
float: left;
}
Тени
Блок отбрасывает тень в разные стороны:
![](https://habrastorage.org/storage2/d58/5d6/1b4/d585d61b4e9c4d506fae62ef9649b60f.jpg)
.drop-shadow {
background: #9479fa;
}
.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)
}
Выделение блока тенью:
![](https://habrastorage.org/storage2/117/3b2/d91/1173b2d91e56f4540aabfb6b645816ff.jpg)
div[class*="emphasize-"] {
background: #69D2E7;
}
.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)
}
Выпуклые блоки:
![](https://habrastorage.org/storage2/936/bc8/94d/936bc894d7cc333c1c3bb02e4c439937.jpg)
div[class*="embossed"] {
background: #8ec12d;
color: #333;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}
.embossed-light {
border: 1px solid rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.embossed-heavy {
border: 1px solid rgba(0,0,0,0.05);
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);
}
Градиенты
Разные типы градиентов:
![](https://habrastorage.org/storage2/ae7/4a8/b45/ae74a8b4533af80b7854ea27af5f4889.jpg)
div[class*="gradient"]{
background-color: #DEB8A0;
box-shadow: 0 0 0 1px #a27b62;
}
.gradient-light-linear {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
Закругленные углы
![](https://habrastorage.org/storage2/969/fc6/2a4/969fc62a491611aa4555d6d701a34789.jpg)
div[class*="rounded"] {
background: #fca1cc;
}
.light-rounded {
border-radius: 3px;
}
.heavy-rounded {
border-radius: 8px;
}
.full-rounded {
border-radius: 50%;
}
.barrel-rounded {
border-radius: 20px/60px;
}
Ссылки
Базовая конструкция:
<!-- Inline -->
Просто какой-то текст и <a href="#">ссылка</a>.
<!-- Block -->
<a href="#">Ссылка</a>
Несколько примеров стилей для ссылки в тексте:
![](https://habrastorage.org/storage2/247/705/d9b/247705d9bf0571a1ffa72ec45b84eb6a.jpg)
.inline-link-1 {
display: inline-block;
margin: 0 0.2em;
padding: 3px;
background: #97CAF2;
border-radius: 2px;
transition: all 0.3s ease-out;
/* Font styles */
text-decoration: none;
font-weight: bold;
color: white;
}
.inline-link-1:hover {
background: #53A7EA
}
.inline-link-1:active {
background: #C4E1F8
}
.inline-link-1:visited {
background: #F2BF97
}
![](https://habrastorage.org/storage2/f14/fe8/5b9/f14fe85b9a88b8ce6b04c59e1e105ff2.jpg)
.inline-link-2 {
display: inline-block;
border-bottom: 2px dashed rgba(0,0,0,0.9);
/* Font styles */
text-decoration: none;
color: #777;
}
.inline-link-2:hover {
border-bottom-style: dotted;
}
.inline-link-2:active {
border-bottom-style: solid;
}
.inline-link-2:visited {
border-bottom: 2px solid #97CAF2;
}
![](https://habrastorage.org/storage2/f82/54d/cce/f8254dcce92b1ba3eddd5be42066a1e2.jpg)
.inline-link-3 {
display: inline-block;
position: relative;
padding-left: 6px;
/* Font styles */
text-decoration: none;
color: #6AB3EC;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}
.inline-link-3:hover {
color: #3C9CE7;
}
.inline-link-3:before {
content: "\25BA";
font-size: 80%;
display: inline-block;
padding-right: 3px;
pointer-events: none;
}
.inline-link-3:hover:before {
color: #F2BF97;
}
Ссылка в Metro-стиле:
![](https://habrastorage.org/storage2/3f7/6bd/11a/3f76bd11ae2059d94edc2db7fee0f180.jpg)
.metro {
display: inline-block;
padding: 10px;
margin: 10px;
background: #08C;
/* Font styles */
color: white;
font-weight: bold;
text-decoration: none;
}
.metro:hover {
background: #0AF
}
.metro.three-d {
position: relative;
box-shadow:
1px 1px #53A7EA,
2px 2px #53A7EA,
3px 3px #53A7EA;
transition: all 0.1s ease-in;
}
.metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
Ссылка с обводкой:
![](https://habrastorage.org/storage2/83a/fbd/a57/83afbda57a1cc4edc4a4b72807019539.jpg)
.bordered-link {
display: inline-block;
padding: 8px;
border: 3px solid #FCB326;
border-radius: 6px;
box-shadow:
0 2px 1px rgba(0, 0, 0, 0.2),
inset 0 2px 1px rgba(0, 0, 0, 0.2);
/* Font styles */
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
color: #222;
}
.bordered-link:hover {
border-color: #FDD68B
}
.bordered-link:active {
border-color: #FEE8BD
}
Красивые кнопочки:
![](https://habrastorage.org/storage2/dab/810/a0f/dab810a0f34c246269b6fb5be1d99e53.jpg)
.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}
.modern:hover {
background: #C7FE0A
}
.embossed-link {
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.17),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link:active {
box-shadow:
inset 0 -2px 1px rgba(255,255,255,0.2),
inset 0 3px 2px rgba(0,0,0,0.12);
}
.socle {
position: relative;
z-index: 2;
}
.socle:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
inset 0 -1px 0 rgba(255,255,255,0.7);
top: -6px;
bottom: -6px;
right: -6px;
left: -6px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
Input
Основная конструкция:
<input type="text" placeholder="Input name">
Добавляет border-radius по клику:
![](https://habrastorage.org/storage2/aab/c05/2d0/aabc052d0529001f172b38f506b51667.jpg)
.simple-input {
display: block;
padding: 5px;
border: 4px solid #F1B720;
border-radius: 5px;
color: #333;
transition: all 0.3s ease-out;
}
.simple-input:hover {
border-radius: 8px
}
.simple-input:focus {
outline: none;
border-radius: 8px;
border-color: #EBD292;
}
Повторяет iOS инпуты:
![](https://habrastorage.org/storage2/e30/1d5/a6f/e301d5a6f6bc5352e86a7ce6a7ec58fa.jpg)
.mac {
display: block;
border: none;
border-radius: 20px;
padding: 5px 8px;
color: #333;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
.mac:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1),
0 0 5px 1px #51CBEE;
}
С градиентом:
![](https://habrastorage.org/storage2/810/45d/d40/81045dd40ba4a970d1876d4108c5d6c5.jpg)
.depth {
display: block;
border: 1px solid rgba(255,255,255,0.6);
background: linear-gradient(#eee, #fff);
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 4px rgba(0,0,0,0.4);
padding: 5px;
color: #555;
}
.depth:focus {
outline: none;
background-position: 0 -1.7em;
}
Вместо формы ввода просто линия:
![](https://habrastorage.org/storage2/325/40c/586/32540c58616fb2cccfd5e09e049461f9.jpg)
.line {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted black;
padding: 5px 2px 0 2px;
}
.line:focus {
outline: none;
border-color: #51CBEE;
}
Примеры взяты из статьи Basic Ready-to-Use CSS Styles.