Советы и готовые решения для верстальщиков.

« Правила раздела »

1. Обсуждения - запрещены! Здесь размещаются только "советы или готовые решения для верстальщиков.
2. Если хотите отблагодарить автора поста, то используем кнопку «Мне нравится». Создавать для этого новые сообщения не нужно!
3. Размещать ссылки на сторонние ресурсы - запрещено.
4. Если у вас возникли вопросы по одному из сообщений и вы считаете, что оно требует доработки или прочих изменений, то свяжитесь с автором поста для редактирования информации или сообщите одному из модераторов раздела для внесения изменений при помощи личных сообщений или кнопки "Пожаловаться".

Правила оформления сообщения

1. Название - для удобного поиска.
2. Использовать размер шрифта для заголовков не больше 5, для остального не меньше 3 (стандартный). Если используете другой "цвет" шрифта, то он должен быть адекватным и не содержать 'радуги' или 'ядовитый' оттенок, который при просмотре ломает глаза.
3. Для кода используем соответствующие теги, если код длинный, то прячем под "спойлер".
4. Свободная информация взятая из интернета под хайдом не устанавливается! Если это ваш личный метод, то хайд на ваше усмотрение.

Пример:

Делаем текст, который не заходит под элемент не известной заранее ширины.


CSS:

HTML:

 

В свое время очень помогла статья http://css-tricks.com/examples/ShapesOfCSS/ для построение фигур с помощью CSS ниже самые распространенные фигуры по ссылке можно найти много экзотических
Квадрат

Прямоугольник

Круг

Овал

Треугольник вверх

Треугольник вниз

Треугольник влево

Треугольник вправо

Трапеция

Параллелограмм

6-конечная звезда

5-конечная звезда

 

Генератор Metro интерфейсов PHP + CSS

скачать

 

Елочные шары, созданные с использованием CSS3
Для вывода елочных шаров будет использоваться только правила CSS3 и HTML (без изображений)

• Посмотреть демо
• Скачать исходники

Ингредиенты CSS
Прежде чем начать, сделаем беглый обзор используемых инструментов.

1. :before и :after псевдо-элементы: Использование псевдо-элементов помогает уменьшить количество кода HTML, который необходим для вывода страницы. Если вы работали со скругленными углами в CSS2, то, вероятно, вы знаете, что для создания гибких элементов со скругленными углами, которые подгоняются под различные размеры контента, нужно использовать несколько пустых элементов div. Применение псевдо-элементов помогает сократить объем вспомогательной разметки. В нашем примере используется только один пустой div для одного шарика, в который можно добавить текст.
2. Линейные и радиальные градиенты CSS3: Для создания реалистичных цветовых переходов и отражений мы будем использовать цветовые градиенты.
3. Тени, трансформации, скругленные углы и так далее: Для создания форм мы будем использовать комбинацию свойств box-shadow, transform, и border-radius.

HTML
Сначала создадим разметку. Структура страницы минимальна и содержит только необходимый код.

Так как сфера нуждается в блочном элементе, то мы используем <div>, а не <span>. Однако, вы можете использовать тег <span> в сочетании со свойством CSS display: block.

Элементы размещаются в неупорядоченном списке, потому что в нашем примере нет упорядоченной иерархии и все шары одинакового размера.

HTML:

<ul id="bauble-container">
<li>
<div class="bauble red-bauble"></div>
</li>
<li>
<div class="bauble blue-bauble"></div>
</li>
<li>
<div class="bauble yellow-bauble"></div>
</li>
<li>
<div class="bauble green-bauble"></div>
</li>
</ul>

Описание ID и классов:

1. #bauble-container - наш неупорядоченный список, ID которого будет использоваться для точного указания элементов списка (<li>).
2. .bauble - основная часть украшения, сферическая форма.
3. .red-bauble, .blue-bauble, .yellow-bauble и .green-bauble - используются для добавления вариаций цветов. Очень легко использовать различные комбинации шаров, просто изменив несколько строк кода в разметке.

CSS
Рассмотрим правила CSS, которые превращают наш скучный неупорядоченный список в набор елочных украшений.

Код CSS снабжен комментариями, которые проясняют ключевые моменты.

Код:

/* Общая часть */
html
{
background: #f2f5f6; /* Цвет фона, если градиент не поддерживается */
background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6));
height: 100%;
}

#bauble-container
{
list-style: none; /* Удаляем метки элементов списка */
width: 568px; /* Реальная ширина списка после суммирования полей, рамок и ширины элемента */
margin: 150px auto; /* Центрируем */
padding: 0;
}

#bauble-container li
{
margin: 0 20px; /* Оставим немного места */
float: left; /* Располагаем элементы в ряд */
}

/* В данной части добавляется строка для элементов елочных украшений */
#bauble-container li:before
{
content: "";

background: #dadada; /* Цвет фона, если градиент не поддерживается */
background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));

height: 50px;
width: 2px;
display: block;
margin: 0 auto;
}

/* Вращаем их */
#bauble-container li:nth-child(odd)
{
-moz-transform: rotate(-5deg); /* Firefox */
-webkit-transform: rotate(-5deg); /* Chrome и Safari */
-o-transform: rotate(-5deg); /* Opera */
-ms-transform: rotate(-5deg); /* Сюрприз! IE9 со своим собственным префиксом трансформации */
}

#bauble-container li:nth-child(even)
{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}

/* Стиль для елочных украшений */
.bauble
{
-moz-border-radius: 100px;
border-radius: 100px;

-moz-box-shadow: 0 0 5px #777777;
box-shadow: 0 0 5px #777777;
-webkit-box-shadow: 0 0 5px #777777;

border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}

/* Стиль для верхней части елочных украшений */
.bauble:before
{
content: "";

background: #fff; /* Цвет фона, если градиент не поддерживается */
background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));

-moz-border-radius: 2px;
border-radius: 2px;

-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;

border: 1px solid #dadada ;
height: 10px;
width: 20px;
position: absolute;
left: 50%;
top: -12px;
margin-left: -10px;
}

/* Добавляем отражение света */
.bauble:after
{
content: "";

-moz-border-radius: 100px;
border-radius: 100px;

background: #fff; /* Цвет фона, если градиент не поддерживается */
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));

position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
opacity: 0.15;
height: 80px;
width: 80px;
}

/* Устанавливаем цвета */
.red-bauble
{
background: #c8171f; /* Цвет фона, если градиент не поддерживается */
background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}

.blue-bauble
{
background: #00a1ee; /* Цвет фона, если градиент не поддерживается */
background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}

.yellow-bauble
{
background: #fcb83d; /* Цвет фона, если градиент не поддерживается */
background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}

.green-bauble
{
background: #4d8d00; /* Цвет фона, если градиент не поддерживается */
background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}

 

можешь обновить ссылку на скачку?