Архив рубрики: Дизайн

Симпатичные стили для формы (input,textarea)

#formazh input, textarea {
/*Borders and background color*/
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #DADADA;
background: #F9F9F9;

/* Shadows*/
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);

/*Font styles*/
font-family: «Trebuchet MS», Arial, Helvetica, sans-serif;
color: #747474;
font-size: 12;
font-style: italic;

/*Spacings*/
margin-top: 5px;
height: 18px;
line-height: 18px;
padding: 5px;
width: 200px;
outline: none;
}

CSS3 Лента

Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h2>.

<h2>My Heading</h2>

Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.

/* элемент с контентом */
#page {
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #333;
}
h2 {
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 30px 10px 10px -71px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используемposition: relative чтобы при необходимости можно было позиционировать другие элементы ленты.

Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.

h2:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before.

Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.

h2:before {
	content: ' ';
	position: absolute;
	width: 30px;
	height: 0;
	left: -30px;
	top: 12px;
	border-width: 20px 10px;
	border-style: solid;
	border-color: #999 #999 #999 transparent;
}

Цвет границы у псевдоэлемента должен совпадать с цветом фона h2, поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.

Красивые шрифты для сайта by Google fonts

Красивые шрифты для сайта by Google fonts

Jura

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Jura&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Jura’, arial, serif; }

Ruslan Display

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Ruslan+Display&subset=cyrillic,latin’                                                                    rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Ruslan Display’, arial, serif; }

Play

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Play&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’>
</link>

CSS
h1 { font-family: ‘Play’, arial, serif; }

Didact Gothic

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Didact+Gothic&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Didact Gothic’, arial, serif; }

Open Sans Condensed

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Open Sans Condensed’, arial, serif; }

Lobster

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Lobster’, arial, serif; }

 

Красивые шрифты для сайта. Коллекция лучших шрифтов для дизайна

Сегодня выкладываю большую коллекцию лучших шрифтов для дизайна. Да не просто шрифтов, а кириллических (то есть с русскими буквами).Более 50 вариантов. Такие посты надо добавлять в закладки!

 

Dited

Bender

Furore

Metro

Days

Philosopher

Molot

London

20 DB

Neucha

Cuprum

Zopa

Airport

Fontin Sans Cyrillic

Hattori Hanzo

Bicubik

Hardpixel

PixelPlay

Flow

Zhizn

Cony

Ubuntu Font Family

Movavi Grotesque Black

Liberation Serif

DAN

Хартия

DejaVu fonts

Pacifica

Dimitrina

Danger

St Transmission

Gentium

Brava

Metro

GrandNover

Каори

Сумкин шрифт

Тот самый шрифт

Барделин

Perforama

Codename Coder Free 4F

Five Minutes

Boldin

Pt Sans

Play

Open Sans

PT Serif

AleksandraC

GardensC

Web Serveroff