Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
1 / 1 / 0
Регистрация: 09.05.2012
Сообщений: 74
1

Вёрстка тени для текста с помощью CSS

18.10.2016, 11:36. Показов 1159. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Ребят всем привет! Помогите пожалуйста сделать длинную тень к тексту? Вот картинка как должно быть
Вёрстка тени для текста с помощью CSS
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.10.2016, 11:36
Ответы с готовыми решениями:

Эксплорер дублирует ссылку при использовании filter для тени текста
Здравствуйте. Объясните, пожалуйста, почему так работает. Используется text-shadow и filter:...

Создание отступов текста с помощью css-свойства margin
Здравствуйте! Например, такой код: <!DOCTYPE html> <html lang="en"> <head> ...

Тени в CSS или что-то типа того
Всем привет :) Нужна помощь в CSS, вот собственно проблема. Заранее спасибо! :)

Вёрстка css
Добрый день, боюсь быть забаненным, но мучаюсь уже 2 дня. Дизайн очень простой - шапка, меню...

3
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
18.10.2016, 19:13 2
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

CSS
1
2
3
4
span{
  font-size:48px;
  text-shadow: 0px 0px 0 #ff5350,1px 1px 0 #ff5350,2px 2px 0 #ff5350,3px 3px 0 #ff5350,4px 4px 0 #ff5350,5px 5px 0 #ff5350,6px 6px 0 #ff5350,7px 7px 0 #ff5350,8px 8px 0 #ff5350,9px 9px 0 #ff5350,10px 10px 0 #ff5350,11px 11px 0 #ff5350,12px 12px 0 #ff5350,13px 13px 0 #ff5350,14px 14px 0 #ff5350,15px 15px 0 #ff5350,16px 16px 0 #ff5350,17px 17px 0 #ff5350,18px 18px 0 #ff5350,19px 19px 0 #ff5350,20px 20px 0 #ff5350,21px 21px 0 #ff5350,22px 22px 0 #ff5350,23px 23px 0 #ff5350,24px 24px 0 #ff5350,25px 25px 0 #ff5350,26px 26px 0 #ff5350,27px 27px 0 #ff5350,28px 28px 0 #ff5350,29px 29px 0 #ff5350,30px 30px 0 #ff5350,31px 31px 0 #ff5350,32px 32px 0 #ff5350,33px 33px 0 #ff5350,34px 34px 0 #ff5350,35px 35px 0 #ff5350,36px 36px 0 #ff5350,37px 37px 0 #ff5350,38px 38px 0 #ff5350,39px 39px 0 #ff5350,40px 40px 0 #ff5350,41px 41px 0 #ff5350,42px 42px 0 #ff5350,43px 43px 0 #ff5350,44px 44px 0 #ff5350,45px 45px 0 #ff5350,46px 46px 0 #ff5350,47px 47px 0 #ff5350,48px 48px 0 #ff5350,49px 49px 0 #ff5350,50px 50px 0 #ff5350,51px 51px 0 #ff5350,52px 52px 0 #ff5350,53px 53px 0 #ff5350,54px 54px 0 #ff5350,55px 55px 0 #ff5350,56px 56px 0 #ff5350,57px 57px 0 #ff5350,58px 58px 0 #ff5350,59px 59px 0 #ff5350,60px 60px 0 #ff5350,61px 61px 0 #ff5350,62px 62px 0 #ff5350,63px 63px 0 #ff5350,64px 64px 0 #ff5350,65px 65px 0 #ff5350,66px 66px 0 #ff5350,67px 67px 0 #ff5350,68px 68px 0 #ff5350,69px 69px 0 #ff5350,70px 70px 0 #ff5350,71px 71px 0 #ff5350,72px 72px 0 #ff5350,73px 73px 0 #ff5350,74px 74px 0 #ff5350,75px 75px 0 #ff5350,76px 76px 0 #ff5350,77px 77px 0 #ff5350,78px 78px 0 #ff5350,79px 79px 0 #ff5350,80px 80px 0 #ff5350,81px 81px 0 #ff5350,82px 82px 0 #ff5350,83px 83px 0 #ff5350,84px 84px 0 #ff5350,85px 85px 0 #ff5350,86px 86px 0 #ff5350,87px 87px 0 #ff5350,88px 88px 0 #ff5350,89px 89px 0 #ff5350,90px 90px 0 #ff5350,91px 91px 0 #ff5350,92px 92px 0 #ff5350,93px 93px 0 #ff5350,94px 94px 0 #ff5350,95px 95px 0 #ff5350,96px 96px 0 #ff5350,97px 97px 0 #ff5350,98px 98px 0 #ff5350,99px 99px 0 #ff5350,100px 100px 0 #ff5350,101px 101px 0 #ff5350,102px 102px 0 #ff5350,103px 103px 0 #ff5350,104px 104px 0 #ff5350,105px 105px 0 #ff5350,106px 106px 0 #ff5350,107px 107px 0 #ff5350,108px 108px 0 #ff5350,109px 109px 0 #ff5350,110px 110px 0 #ff5350,111px 111px 0 #ff5350,112px 112px 0 #ff5350,113px 113px 0 #ff5350,114px 114px 0 #ff5350,115px 115px 0 #ff5350,116px 116px 0 #ff5350,117px 117px 0 #ff5350,118px 118px 0 #ff5350,119px 119px 0 #ff5350,120px 120px 0 #ff5350,121px 121px 0 #ff5350,122px 122px 0 #ff5350,123px 123px 0 #ff5350,124px 124px 0 #ff5350,125px 125px 0 #ff5350,126px 126px 0 #ff5350,127px 127px 0 #ff5350,128px 128px 0 #ff5350,129px 129px 0 #ff5350,130px 130px 0 #ff5350,131px 131px 0 #ff5350,132px 132px 0 #ff5350,133px 133px 0 #ff5350,134px 134px 0 #ff5350,135px 135px 0 #ff5350,136px 136px 0 #ff5350,137px 137px 0 #ff5350,138px 138px 0 #ff5350,139px 139px 0 #ff5350,140px 140px 0 #ff5350,141px 141px 0 #ff5350,142px 142px 0 #ff5350,143px 143px 0 #ff5350,144px 144px 0 #ff5350,145px 145px 0 #ff5350,146px 146px 0 #ff5350,147px 147px 0 #ff5350,148px 148px 0 #ff5350,149px 149px 0 #ff5350,150px 150px 0 #ff5350,151px 151px 0 #ff5350,152px 152px 0 #ff5350,153px 153px 0 #ff5350,154px 154px 0 #ff5350,155px 155px 0 #ff5350,156px 156px 0 #ff5350,157px 157px 0 #ff5350,158px 158px 0 #ff5350,159px 159px 0 #ff5350,160px 160px 0 #ff5350,161px 161px 0 #ff5350,162px 162px 0 #ff5350,163px 163px 0 #ff5350,164px 164px 0 #ff5350,165px 165px 0 #ff5350,166px 166px 0 #ff5350,167px 167px 0 #ff5350,168px 168px 0 #ff5350,169px 169px 0 #ff5350,170px 170px 0 #ff5350,171px 171px 0 #ff5350,172px 172px 0 #ff5350,173px 173px 0 #ff5350,174px 174px 0 #ff5350,175px 175px 0 #ff5350,176px 176px 0 #ff5350,177px 177px 0 #ff5350,178px 178px 0 #ff5350,179px 179px 0 #ff5350,180px 180px 0 #ff5350,181px 181px 0 #ff5350,182px 182px 0 #ff5350,183px 183px 0 #ff5350,184px 184px 0 #ff5350,185px 185px 0 #ff5350,186px 186px 0 #ff5350,187px 187px 0 #ff5350,188px 188px 0 #ff5350,189px 189px 0 #ff5350,190px 190px 0 #ff5350,191px 191px 0 #ff5350,192px 192px 0 #ff5350,193px 193px 0 #ff5350,194px 194px 0 #ff5350,195px 195px 0 #ff5350,196px 196px 0 #ff5350,197px 197px 0 #ff5350,198px 198px 0 #ff5350,200px 200px 0 transparent;
}
HTML5
1
<span>Lorem ipsum dolor.</span>
0
1 / 1 / 0
Регистрация: 09.05.2012
Сообщений: 74
19.10.2016, 03:44  [ТС] 3
А вы в каком генераторе это нашли?
Я просто похожее встречал, но с цветом не то. На картинке градиент идет с черного до цвета фона.
А через ЖС и препроцессоры готовые решения есть? в ЖС нашел плагин, но он не совсем нужный результат выдает (
0
0 / 0 / 3
Регистрация: 19.10.2016
Сообщений: 40
19.10.2016, 14:22 4
http://xiper.net/collect/html-... ext-shadow
0
19.10.2016, 14:22
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.10.2016, 14:22
Помогаю со студенческими работами здесь

Вёрстка всплывающего окна на css
Здравствуйте! Нужен совет, как сделать анимацию (открыть - закрыть всплывающее окно, к примеру)...

Вёрстка нестандартного блока на CSS
Здравствуйте. Подскажите, как можно сделать подобный блок на CSS?

Адаптивная вёрстка: CSS Grid vs Flex
Доброго времени суток, коллеги! По воле судьбы осваиваю новую профессию - верстальщик. Попробовал...

Вёрстка шаблона psd, HTML-CSS
Помогите как сверстать из psd сайт ,3 недели мучаюсь не как не выходит . если онлайн сервис...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru