- 0
Как определить параметры тени в photoshop для css верстки?
-
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?
Заранее спасибо за ответы.
-
Question
p-alexey
Всем добрый день, расскажите как определить параметры тени в 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
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.