Градиенты, размытия и сложные фигуры на css

@fotonsja · Регистрация: 16.06.2009

Студворк — интернет-сервис помощи студентам

Доброго времени суток! В общем есть такой шаблон (Прикрепил 5 метров).

Прежде всего интересует как делать блоки, границы которых - дуги,
с помощью canvas всевозможных transform, или как?

В хедере есть 2 параллелограма, как их тоже сделать не картинками?? я знаю как сделать обычный параллелограм, но как сделать такие как в хедере не знаю.

CSS
1
2
3
4
5
6
7
8
#parallelogram_obichniy {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

Также интересует, как сделать засветление под надписью в центре Centra/hotels, нужно делать какой-то хитрый градиент, но именно такой у меня не получается.

Но самая большая проблема это - 4 блока внизу: Plan your visit, Upcoming events, Special proposal ... Как им размыть угол так чтобы его вообще было не видно я ума не приложу, + у меня возникают сомнения насчет того как лучше сделать под этими четыремя блоками фон в наклонную полосочку - целиком картинкой или есть какое-то св-во в css ,что можно обойтись и без картинок.

Шаблон скачан с какого-то сайта бесплатных псдшек, если кому интересно могу прикрепить все(там и шрифты есть)

Извиняюсь, если тему не совсем правильно оформил.

@dane.yeah · 16.04.2013, 07:39

http://one-div.com/
вот тут можно поразбираться как именно реализуются дуги.

Сообщение от fotonsja

Также интересует, как сделать засветление под надписью в центре Centra/hotels, нужно делать какой-то хитрый градиент, но именно такой у меня не получается.

http://htmlbook.ru/css/text-shadow а сзади рисунок, вот и весь градиент

Но самая большая проблема это - 4 блока внизу: Plan your visit, Upcoming events, Special proposal ... Как им размыть угол так чтобы его вообще было не видно я ума не приложу, + у меня возникают сомнения насчет того как лучше сделать под этими четыремя блоками фон в наклонную полосочку - целиком картинкой или есть какое-то св-во в css ,что можно обойтись и без картинок.

http://htmlbook.ru/css/box-shadow

@fotonsja · 16.04.2013, 14:24 **[ТС]**

На хтмл бук сижу постоянно как любой верстальщмк, и как сделать послностью невидимый угол в блоке мне всервно не ясно, тоже самое касается и засветеления под central/hotels, вы видимио представляете как нужно проавильно прописать тень - я нет. Не понял также фразы "а сзади рисунок". С дугами попробую офк - с того сайта вроде есть похожие, но скорее всего просто картинкой сделаю.

@inviter19 · 16.04.2013, 18:11

fotonsja, невидимый угол делается с помощью градиента и альфа-канала. Засветление делается также через radial gradient.

Добавлено через 5 минут
Про canvas прочитайте тут. Раздел "линии и дуги".

@fotonsja · 16.04.2013, 19:29 **[ТС]**

Спасибо, хоть что-то

@koza4ok · 18.04.2013, 19:04

http://habrahabr.ru/post/126207/ Геометрические фигуры на CSS

@fotonsja · 18.04.2013, 22:19 **[ТС]**

Я видел этот пост. Гуглить тоже умею. Вы сами то сможете, основываясь на материале из этого поста, сделать то что мне нужно - я нет.

@inviter19 · 18.04.2013, 22:22

Чувак, элементарно же. Подумай головой просто и погугли про углы transform.

HTML5
1
2
3
4
5
6
<div style="width: 150px;
    height: 100px;
    -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);
    background: red;"></div>

Поиграй со значениями и цветом фона и получишь то, что надо.
Вот, например, почитай это. Тебе нужен пункт про skew(x\y).

@koza4ok · 18.04.2013, 22:23

ну раз можеш гуглить так и делай задачу сам.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@fotonsja 0 / 0 / 0 Регистрация: 16.06.2009 Сообщений: 14
	16.04.2013, 14:24 [ТС]
	На хтмл бук сижу постоянно как любой верстальщмк, и как сделать послностью невидимый угол в блоке мне всервно не ясно, тоже самое касается и засветеления под central/hotels, вы видимио представляете как нужно проавильно прописать тень - я нет. Не понял также фразы "а сзади рисунок". С дугами попробую офк - с того сайта вроде есть похожие, но скорее всего просто картинкой сделаю. 0

@inviter19 Заблокирован
	16.04.2013, 18:11
	fotonsja, невидимый угол делается с помощью градиента и альфа-канала. Засветление делается также через radial gradient. Добавлено через 5 минут Про canvas прочитайте тут. Раздел "линии и дуги". 1

@fotonsja 0 / 0 / 0 Регистрация: 16.06.2009 Сообщений: 14
	16.04.2013, 19:29 [ТС]
	Спасибо, хоть что-то 0

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	18.04.2013, 19:04
	http://habrahabr.ru/post/126207/ Геометрические фигуры на CSS 1

@fotonsja 0 / 0 / 0 Регистрация: 16.06.2009 Сообщений: 14
	18.04.2013, 22:19 [ТС]
	Я видел этот пост. Гуглить тоже умею. Вы сами то сможете, основываясь на материале из этого поста, сделать то что мне нужно - я нет. 0

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	18.04.2013, 22:23
	ну раз можеш гуглить так и делай задачу сам. 0