?

Log in

No account? Create an account

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

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)

Personal Data

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