• Добро пожаловать на биржу фриланса Justwebber.com

  • Мы делаем удаленное сотрудничество удобным

  • Заказчикам - огромный выбор исполнителей, а фрилансерам - неиссякаемый поток проектов

  • За удаленной работой - ваше будущее и финансовое благополучие

Как можно научиться добавлять тень для блока?

Тень для блока средствами css , box-shadow


Навигатор: Форумы / Предметное общение / Программирование / Как можно научиться добавлять тень для блока?
Автор Сообщение

dushman

#1 /21.05.2013 17:57
 64
 

Карма:  5




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

ADMIN

#2 /21.05.2013 19:25
АДМИНИСТРАТОР   


 286
 

Карма:  20




Если хотите самостоятельно подбирать тень для изображений, блоков, можно для этого воспользоваться онлайн сервисом. Это поможет подобрать размер тени, сдвиг, расплывчатость, указать как ей размещаться, внутри блока или снаружи. Это будет самый оптимальный вариант, так как науки как таковой для создания тени не нужно. Вы же не будете учить наизусть все оттенки цветов?
Естественно что нет, да и зачем, если можно подобрать все при помощи ползунков. Все что вам изначально нужно знать - это куда вставить код, и как он выглядит. Все остальное сможете сгенерировать и подобрать автоматически. Для того чтобы добавить тень , нужно иметь объект. Допустим пусть это будет блок размером 100 на 100 пикселей, с тоненькой рамочкой для видимости. На практике это будет выглядеть так:

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      div{width:100px;height:100px;border:1px solid #000}
    </style>
  </head>
  
  <body>
    <div></div>
  </body>

</html>

И теперь сами стили тени:
Для создания тени используется box-shadow такого вида:   box-shadow: 44px 40px 4px 40px #1f1b19; (<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>). Тень будет снаружи. Если хотите тень снутри - добавляется атрибут inset , например так:

box-shadow:inset 44px 40px 4px 40px #1f1b19;

Для старых браузеров добавляют приставки под названием вендорные префиксы. Почитайте об этом в сети если интересно. Вам же достаточно просто воспользоваться генератором, скопировать и вставить код, который будет примерно такого вида:

-moz-box-shadow: inset 4px 4px 4px 4px #1f1b19;
-webkit-box-shadow: inset 4px 4px 4px 4px #1f1b19;
box-shadow: inset 4px 4px 4px 4px #1f1b19;

Его нужно добавить в стили блока , который хотите сделать с тенью, поэтому окончательный пример будет выглядеть примерно так:

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      div{width:100px;height:100px;border:1px solid #000;-moz-box-shadow: inset 4px 4px 4px 4px #1f1b19;
-webkit-box-shadow: inset 4px 4px 4px 4px #1f1b19;
box-shadow: inset 4px 4px 4px 4px #1f1b19;}
    </style>
  </head>
  
  <body>
    <div></div>
  </body>

</html>

Онлайн генератор теней для блока можно найти здесь