?

Log in

Previous Entry | Next Entry

CSS3 box-shadow tricks

Без никаких картинок, чистый CSS.

1.



Тень непрямоугольной формы:

March, 2013
29
Четвертый день Пейсаха
 

Ниже обычной боксовой тени подкладывается невидимый div со скругленными до безобразия углами (он сейчас находится прямо под этим текстом). От него отбрасывается вверх «тень» белого цвета овальной формы. Чтобы сам блок не влиял на расположение элементов страницы, его размеры уничтожаются с помощью отрицательных значений margin.

Код:

<div style="width: 500px; padding: 0px; background: #fff">
  <div style="border: 1px solid #500; background: #c00; font-size: 25pt; color: #fff; font-family: 'Calibri', 'Tahoma', 'Arial'; font-weight: bold; padding: 2ex; text-align: center; box-shadow: inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)">
    March, 2013
  </div>
  <div style="border: 1px solid #eee; background: #eee; font-size: 175pt; font-family: 'Calibri', 'Tahoma', 'Arial'; color: #444; font-weight: bold; text-align: center; line-height: 100%; padding: 0.3ex 1ex 0px 1ex; box-shadow: 0px 75px 50px -50px rgba(0, 0, 0, 0.75), inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)">
    29
    <div style="font-size: 12pt; font-weight: normal; margin: 10ex 0px; line-height: 100%">
      Четвертый день Пейсаха
    </div>
  </div>
  <div style="height: 300px; background: #fff; margin: 75px 50px -350px 50px; border-radius: 150px; box-shadow: 0px -62px 50px rgba(255, 255, 255, 1)">
    &nbsp;
  </div>
</div>


2.



Ну и, возвращаясь к ранее опубликованным обоям, мазки мягкой кистью:


 
 
msft
 


Тут все еще проще :-) Два (!) блока со скруглениями border-radius: 25% 100% и border-radius: 100% 25% имитируют овалы, наклоненные под разными углами, и отбрасывают каждый по две цветных тени. Сами блоки невидимы, их размеры убраны из основного потока. А тени отбрасываются на разные расстояния влево и вверх, чтобы получить четыре пятна. За счет коэффициентов прозрачности и размытия получается симпатичный эффект смешанных красок. К сожалению, эффект смешения световых пятен так не создать.

Код:
<div style="padding: 0px; background: #fff">
  <div style="float: left; margin: 0px; width: 275px; height: 275px">
    <div style="background: transparent; width: 150px; height: 150px; margin: 0px 0px 0px -200px; border-radius: 25% 100%; box-shadow: 325px 125px 50px rgba(255, 212, 0, 0.75), 200px 0px 50px rgba(255, 0, 0, 0.75)">
      &nbsp;
    </div>
    <div style="background: transparent; width: 150px; height: 150px; margin: 0px 0px 0px -200px; border-radius: 100% 25%; box-shadow: 200px -25px 50px rgba(0, 128, 255, 0.55), 325px -150px 50px rgba(0, 192, 0, 0.55)">
      &nbsp;
    </div>
  </div>
  <div style="font-size: 225px; font-family: 'Calibri', 'Tahoma', 'Arial'; line-height: 100%; color: #333">
    msft
  </div>
  <div style="clear: both">
    &nbsp;
  </div>
</div>




 

Comments

( 19 comments — Leave a comment )
(Anonymous)
Mar. 29th, 2013 12:31 pm (UTC)
Последняя поделка напоминает бабочку MSN, только неповёрнутую и размытую. Симотично, но лучше сделать чётче пятна, чтобы сочетались с надписью справа.
4px
Mar. 29th, 2013 12:33 pm (UTC)
см. ссылку перед "бабочкой", она должна напоминать световые пятна на рендерных обоях, которые в свое время напоминали бабочку, но в силу своей природы были размыты, а в силу новых тенденций логотипостроения - недоповернуты ))
tsarev_alexey
Mar. 29th, 2013 12:57 pm (UTC)

Прukuнь, я вмесmо "боkсовой mенu" nрочumал "боmоkсной mенu". Воm чmо nолumukа с людьмu делаеm!(

4px
Mar. 29th, 2013 12:59 pm (UTC)
есть у нас тут одна ботоксная тень...
tsarev_alexey
Mar. 29th, 2013 01:00 pm (UTC)
((
4px
Mar. 29th, 2013 01:03 pm (UTC)
style="botox-shadow: ..." лол
tsarev_alexey
Mar. 29th, 2013 01:07 pm (UTC)

Ха-ха-ха)

faiman
Mar. 29th, 2013 01:07 pm (UTC)
)))))
faiman
Mar. 29th, 2013 01:07 pm (UTC)
Ты вынес мой мозг. Заноси назад!
4px
Mar. 29th, 2013 01:10 pm (UTC)
хозяин, бл#ять, куда ставить будем? тяжело же держать!
mynine
Mar. 29th, 2013 01:42 pm (UTC)
Интересно, занес в мемориз, поизучаю на досуге. Не слишком я хорошо знаю всю эту механику :(
4px
Mar. 29th, 2013 02:30 pm (UTC)
да это, скорее, извращения, нежели типовые решения ))
slavawashere.ya.ru
Mar. 29th, 2013 03:16 pm (UTC)
чё за страшная тень? разве такие бывают?
4px
Mar. 29th, 2013 03:42 pm (UTC)
в энторнете бывают
dmitry_mako
Mar. 29th, 2013 06:28 pm (UTC)
Ухтыж, вот это круть! Никогда не думал, что можно рисовать таким образом. Очень неожиданно!
4px
Mar. 29th, 2013 07:49 pm (UTC)
сам фшоке. мне один товарищ подсказал, что никак без картинок тень колендоря не сверстать. и тут все заверте...
хорошо хоть я теперь от этого освободился.
shizotech
May. 20th, 2013 12:56 pm (UTC)
А теперь все это пытаемся применить в каментах и... облом. :)
4px
May. 20th, 2013 12:58 pm (UTC)
в каментах же зарезали CSS давно уже. оставили только несколько богопротивных тегов типа FONT и SMALL
shizotech
May. 20th, 2013 01:09 pm (UTC)
И вроде бы еще DIV работает на отступы. Щас проверю. :)
Проверка

Не работает. Проверено.

Edited at 2013-05-20 01:09 pm (UTC)
( 19 comments — Leave a comment )

Personal Data

mainpic
4px
нет данных
Powered by LiveJournal.com
Designed by Jamison Wieser