Jump to content
  • 0

Как определить параметры тени в photoshop для css верстки?


p-alexey
 Share

Question

Всем добрый день, расскажите как определить параметры тени в photoshop для использования их в text-shadow, box-shadow. Прочитал статью http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/ , но как то не работает метод для углов >90 градусов. Или может быть я что то напутал.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Метод расчета для box-shadow:
@mixin photoshop-drop-shadow ($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $inner: false) {
$angle: (180 - $angle) * pi() / 180; // convert to radians
$h-shadow: round(cos($angle) * $distance);
$v-shadow: round(sin($angle) * $distance);
$css-spread: $size * $spread/100;
$blur: ($size - $css-spread);
$inset: if($inner != false, 'inset', '');
 
@include box-shadow($h-shadow $v-shadow $blur $css-spread $color unquote($inset));
 
Например мои значения: $angle: 120, $distance: 1, $spread: 0, $size: 7, $color: #000, opacity(53%) (внутренняя тень)
тогда у меня получается: box-shadow: 1px 0 7px 0 rgba(000,000,000,.53) inner;
 
$angle = 1.046

$h-shadow: 0.99

$v-shadow: 0.18

и где подставлять минус?

Link to comment
Share on other sites

  • 0

Это SASS? Я не знаю этого языка. Но формула с вычислением катетов работать не будет просто потому, что в CSS нет дробных пикселей, там всё округлится. В итоге 0.99 превратится в 1, а 0.18 превратится в 0. Однако в фотошопе эти параметры дают 1 и 1.

Link to comment
Share on other sites

  • 0

А по какой формуле считаете вы? 

Из начальных параметров у нас есть угол(angle), смещение(distance), стягивание(spread), размер(size) прозрачность(opacity) и собственно цвет тени.

Какой формулой пользуетесь вы для расчета параметров box-shadow и  text-shadow:

box-shadow: inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Vic-Tor
      Подскажите пожалуйста, как сделать паузу мерцания текста, что бы по глазам не било сильно?
      Посмотреть образец  тут.
      info-box {
      width : 96%;
      background : #c2ddf9;
      border : #CD0000 solid 1px;
      color : #CD0000; font-weight: 800;
      line-height : 19px;
      animation: blur .99s ease-out infinite;
      text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff;
      }
      @keyframes blur {
        from {
          text-shadow:0px 0px 5px #fff,
            0px 0px 4px #fff, 
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #CD0000,
            0px 0px 9px #CD0000,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px -10px 12px #4A708B,
            0px -10px 11px #4A708B;
        }
      }
      СПАСИБО!
    • By forest_moss
      всем привет.
      у меня появилась проблема того, что тень текста дико коверкается в сафари и в браузере телефона.
      неужели этого никак не избежать!?
      может, есть какие-нибудь решения, ведь наверно же с этим сталкивались многие другие?


      вот пример, здесь все минимизировано:
      скришот в разных браузерах:

      код:
      <!DOCTYPE html><html><head><meta charset="utf-8"> <title>font</title><style>    body{background: #e5e08b;}    p{    font-family: arial;    color: #ffe;    font-weight:bold;    text-shadow: 0 0 .1ex #ba0, 0 0 .1ex #870, 0 0 .1ex #870,    0 .7ex .1ex #fff,    2ex 0 .5ex #ffd, -2ex 0 .5ex #ffd;    }</style></head><body>        <p>Lorem ipsum</p></body></html>вот даже ссылка, если кому интересно.

      Есть идеи, как правильно обращаться с этой тенью???
      или хотя бы как исправить ситуацию в данном случае...
    • By only_dimon
      Доброго времени суток уважаемые форумчане.
      Реализовать text-shadow для статичного текста в ранних IE не проблема, благо есть фильтры, плагины jQuery и техника подложки.
      Столкнулся с проблемами добавления text-shadow тексту на кнопке и в поле ввода.
      1. Кнопка
      Условия: кнопка с градиентом, тенью и текстом с тенью. Скриншот
      Попытки:
      a) Реализовать просто <a>: не универсально при желании использовать input[button], фильтры и плагин jqueryTextShadow создают тень для всего блока <a>, не только текста.
      б) Реализовать <а><span>text</span></a>: опять же не подходит для input[button] и span блокирует ховеры и клики по кнопке в IE (сделать его прозрачным - не будет текста, сделать z-index - 1 - не будет видно за заливкой).
      c) Реализовать


      <span class="button_green"><input type="button" class="action" /><span class="text">Перенесите меня обратно</span><span class="bg"></span></span>

      .action - прозрачная кнопка или ссылка на всю площадь контейнера с z-index: 10
      .text - текст с тенью c z-index: 5
      .bg - блока на всю площадь контейнера с заливкой и тенью z-index: 1
      Расположение получилось как надо: кнопка с действием наверху, под ней текст с тенью, а под ним заливка.
      Но!
      Проблема в реализации ховеров, эктивов и фокусов.

      .button_green .action:hover + .text + .bg {}
      не работает нигде

      .button_green:hover .bg {}
      не работает в IE, так как .action закрывает собой родителя полностью
      Больше ломать голову сил нету. Давайте ломать вместе или может есть решение проще, а я упустил.
      2.
      input[type=text], input[type=password]
      Условия: текст с тенью в IE. Скриншот
      Попытку реализации еще не сделал: создать поверх div с content editable и необходимым дизайном. по средствам JS синхронизовать изменение текста. Есть ли способ проще? И может быть вообще без JS?
      Заранее спасибо за ответы.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy