Многое конечно можно передать через Base64, но «зачем это» если есть css3. Вот я и решил создать ко дню Хэллоуина что-то красивое именно в css
border-radius — устанавливает радиус скругления уголков рамки, но в моем случае применялось для создания элипсов по типу 00px/00px
box-shadow — добавляет тень к элементу, также inset — для тень внутри элипсов, rgba(0,0,0,0.0) — цвет тени с прозрачностью,
0px 0px 0px — и соответственно размеры этом тени и ее степень размытия
:before и :after псевдоэлементы — которые я использовал для уменьшения HTML кода;
transform: <функция> — так же можно использовать в данном деле, например управляя матрицей.
Очень интересным является так же инструмент: transition: all ;, хоть я его и не использовал, но он бы смог круто подсветить при наведении любой объект тыквы. Этим элементом очень удобно так же делать подсказки. Но к сожалению, свойство transition, с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами.
Когда вы используете для рисования обычные фигуры типа ромб, квадрат, треугольник и прочее то надо использовать — border-«top,right,left,buttom»:00px style transparent и в зависимость от требуемого элемента нужно менять сторону и именно на неё ложить уже цвет фигуры по типу:
Примечательно, что если использовать border-top:00px style transparent и border-radius: 00px/00px; то картинки будут сильно искажаться кроссбраузерности тут не добиться.
Хотя на моем примере странных форм глаза очень даже неплохо смотрятся, но если -Webkit- и Opera все отображается нормально, то Firefox и IE тут выдает несуразные картины
и вот CSS, как практическая реализация данных технологий (кратко, но в цель)
Использую технологию border-radius: 0 0 00px 00px / 0 0 00px 00px; — именно не указывая первые два атрибута можно довольно неплохо справится с фигурой у виде смайлика, так как обычная схема эллипса border-radius: 00px/00px; тут не даст желаемого эффекта.
Вот результат:
CSS основа
border-radius — устанавливает радиус скругления уголков рамки, но в моем случае применялось для создания элипсов по типу 00px/00px
box-shadow — добавляет тень к элементу, также inset — для тень внутри элипсов, rgba(0,0,0,0.0) — цвет тени с прозрачностью,
0px 0px 0px — и соответственно размеры этом тени и ее степень размытия
:before и :after псевдоэлементы — которые я использовал для уменьшения HTML кода;
transform: <функция> — так же можно использовать в данном деле, например управляя матрицей.
Очень интересным является так же инструмент: transition: all ;, хоть я его и не использовал, но он бы смог круто подсветить при наведении любой объект тыквы. Этим элементом очень удобно так же делать подсказки. Но к сожалению, свойство transition, с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами.
Когда вы используете для рисования обычные фигуры типа ромб, квадрат, треугольник и прочее то надо использовать — border-«top,right,left,buttom»:00px style transparent и в зависимость от требуемого элемента нужно менять сторону и именно на неё ложить уже цвет фигуры по типу:
eyes{
position:absolute;
left:112px;
top: 30px;
width: 0;
height: 0;
border-top:27px solid transparent;
border-right:45px solid #FC0;
border-bottom:18px solid transparent;
box-shadow:rgba(0,0,0,0.3) 2px 0px 0px;
Примечательно, что если использовать border-top:00px style transparent и border-radius: 00px/00px; то картинки будут сильно искажаться кроссбраузерности тут не добиться.
Хотя на моем примере странных форм глаза очень даже неплохо смотрятся, но если -Webkit- и Opera все отображается нормально, то Firefox и IE тут выдает несуразные картины
Сама тыква:
<pumpkin>
<tail></tail>
<eyes></eyes>
<smile></smile>
</pumpkin>
и вот CSS, как практическая реализация данных технологий (кратко, но в цель)
eyes:after {
position:absolute;
content:'';
left:-62px;;
top:-27px;
width: 0;
height: 0;
border-top:27px solid transparent;
border-left:45px solid #FC0;
border-bottom:15px solid transparent;
box-shadow:rgba(0,0,0,0.3) -2px 0px 0px;
z-index:4;
}
tail{
position:absolute;
height:65px;
width:58px;
display:block;
background:green;
border-radius:120px/86px;
margin:-15px 0 0 72px;
box-shadow:inset rgba(0,0,0,0.4) 0 2px 0px;
}
smile{
position: absolute;
width: 125px;
height: 35px;
border: 2px solid #CD3700;
border-top: 0px;
background:#FC0;
border-radius: 0 0 125px 125px / 0 0 70px 70px;
top: 100px;
left: 40px;
box-shadow:inset 0px 4px 15px rgba(255,69,0, 0.8);
z-index:4;
Использую технологию border-radius: 0 0 00px 00px / 0 0 00px 00px; — именно не указывая первые два атрибута можно довольно неплохо справится с фигурой у виде смайлика, так как обычная схема эллипса border-radius: 00px/00px; тут не даст желаемого эффекта.
Вот результат: