Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум о uCoz и Web » Веб-программирование и дизайн » CSS » CSS3 графика (Необычные решение на CSS3)
CSS3 графика
djemNaДата: Суббота, 21.09.2013, 23:23 | Сообщение # 1
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
Приветствую! Решил создать тему, в которой будем обсуждать и выкладывать необычные решения на CSS3. В первую очередь иконки, градиенты, узоры.

Так же в это теме можно задать вопрос по поводу CSS3.

Почему нужна эта тема? Потому-что мы все привыкли рисовать иконки и графику и загружать всем этим барахлом свои сайты. Конечно на CSS3 нельзя нарисовать супер-иконку, однако для минималистичного дизайна эти решения будут очень даже полезны.

Большинство даже не знают, что CSS3 это не просто стили типо высоты, ширины и отступов, а это очень мощный инструмент, с которым можно создавать шедевры. Я стараюсь все, на сколько это возможно, делать на CSS3. Бывает даже такое, что кусок скрипта или весь скрипт можно заменить CSS3.

Кароче, много слов, приступим к делу.

Для начало хочу создать с вами простую стрелку. Нечего особого. Ее можно использовать для слайдера или других задач.

Вот код:

HTML

Код
<div class="arrow"><div>


CSS3

Код
.arrow{
width: 20px;
height: 20px;
border:solid #ffffff;
border-radius:2px;
border-width: 0 0 4px 4px;
margin: 30% auto;
transform:rotate(45deg);
}


Все предельно просто. Мы задаем высоты, ширину и 2 рамки - слева и снизу. А потом это все поворачиваем на 45 градусов.

Результат:



Вот так!
Как установить кнопки социальных сетей?

-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
funeralismaticДата: Понедельник, 23.09.2013, 14:34 | Сообщение # 2
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
Цитата (djemNa)
Почему нужна эта тема? Потому-что мы все привыкли рисовать иконки и графику и загружать всем этим барахлом свои сайты. Конечно на CSS3 нельзя нарисовать супер-иконку, однако для минималистичного дизайна эти решения будут очень даже полезны.

Растровая графика не так грузит страницу, нежели CSS эффекты, типа теней и анимации.
а вот иконки на CSS написовать вполне возможно, и не так уж это и сложно.

Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
volfgunusДата: Понедельник, 23.09.2013, 15:40 | Сообщение # 3
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Оффлайн
 
funeralismaticДата: Понедельник, 23.09.2013, 15:42 | Сообщение # 4
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
volfgunus, в хитролисе такого нет. да и правится это легко.
Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
HaskеrДата: Понедельник, 23.09.2013, 17:04 | Сообщение # 5
Подполковник
Сообщений: 102
Репутация: 16
Социальная репутация:

Статус: Оффлайн
можно ли на css3 сделать фон типо этого?

3521147.png(0.2 Kb)
 
HaskеrДата: Понедельник, 23.09.2013, 18:06 | Сообщение # 6
Подполковник
Сообщений: 102
Репутация: 16
Социальная репутация:

Статус: Оффлайн
получилось что-то типо этого

Код
<!doctype html>
<html>
<head>
   <title>noname</title>
</head>
<body>

   <style type="text/css">
    body{
     background-color: #ffffff;
     background-image:   
     linear-gradient(90deg, #00b0d9 10px, transparent 0px);
     background-size:15px 15px;
     background-position: 0 0, -1px -1px, -1px 1px;
    }

   </style>

</body>
</html>

0890325.png(13.4 Kb)


Сообщение отредактировал Haskеr - Понедельник, 23.09.2013, 18:28
 
volfgunusДата: Понедельник, 23.09.2013, 19:34 | Сообщение # 7
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Оффлайн
Цитата (funeralismatic)
volfgunus, в хитролисе такого нет.

Что? Я с файрфокса скринил.
 
funeralismaticДата: Понедельник, 30.09.2013, 15:47 | Сообщение # 8
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
Haskеr, линейный градиент с префиксами юзай, ибо не все браузеры его умеют. и не 90, а 45 градусов.

Добавлено (30.09.2013, 15:47)
---------------------------------------------
volfgunus, УМВР.

Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
HaskеrДата: Понедельник, 30.09.2013, 18:34 | Сообщение # 9
Подполковник
Сообщений: 102
Репутация: 16
Социальная репутация:

Статус: Оффлайн
funeralismatic, если юзаешь 45 получается это

7514566.png(15.1 Kb)


Сообщение отредактировал Haskеr - Понедельник, 30.09.2013, 18:35
 
volfgunusДата: Понедельник, 30.09.2013, 19:31 | Сообщение # 10
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Оффлайн
лол
 
volfgunusДата: Понедельник, 30.09.2013, 20:03 | Сообщение # 11
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Оффлайн
Дарю, старая хрень

Добавлено (30.09.2013, 19:43)
---------------------------------------------
охлол, это та самая версия, свёрстанная на троллфэйсах

Добавлено (30.09.2013, 20:03)
---------------------------------------------
почему-то она у меня одна

43543.html(2.6 Kb)


Сообщение отредактировал volfgunus - Понедельник, 30.09.2013, 19:44
 
funeralismaticДата: Четверг, 03.10.2013, 07:02 | Сообщение # 12
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
Haskеr, гляди аттач от volfgunus, когда-то я это верстал, помню...
Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
HaskеrДата: Четверг, 03.10.2013, 10:25 | Сообщение # 13
Подполковник
Сообщений: 102
Репутация: 16
Социальная репутация:

Статус: Оффлайн
funeralismatic, okay
 
volfgunusДата: Четверг, 03.10.2013, 12:24 | Сообщение # 14
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Оффлайн
Когда-то ты это конкурсом сделал, который не состоялся...
 
HaskеrДата: Четверг, 03.10.2013, 21:46 | Сообщение # 15
Подполковник
Сообщений: 102
Репутация: 16
Социальная репутация:

Статус: Оффлайн
Цитата (volfgunus)
Когда-то ты это конкурсом сделал, который не состоялся...

ага помню я ещё тогда верстать не умел)
 
Форум о uCoz и Web » Веб-программирование и дизайн » CSS » CSS3 графика (Необычные решение на CSS3)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: