Шаблоны для Datalife Engine

Купить платные адаптивные DLE шаблоны по приятным ценам.

Время работы: 10.00 - 20.00 (МСК)
Написать сообщение
Адаптивные dle шаблоны   Новости сайта   Памятка редко используемых css правил

Памятка редко используемых css правил

Просто памятка самому себе. И может кому пригодится.

1. Маска для перехода в фон
2. Текст с фоном по краям с поддержкой padding при переносе строк
3. Обводка текста
4. Градиентный текст. И вообще любой фон под текстом.
5. Обрезка текста по количеству строк с троеточием. Слабая поддержка.


.box {background-color: #fff; padding: 30px; margin-bottom: 30px; color: #000; 
	font-weight: 900; text-transform: uppercase; width: 48%;}
.mask-image, .gradient-text p {background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); color: #fff;}
.mask-image p {-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 60px);}
.bg-inline-text p {display: inline; background-color: #ffcc00; box-decoration-break: clone; 
	box-shadow: 0 0 0 3px #ffcc00; padding: 0 10px;}
.stroke-text p {-webkit-text-stroke: 1px #f64f59; color: transparent;}
.gradient-text p {-webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.line-clamp p {font-size: 15px; font-weight: 400; text-transform: none; line-height: 1.6; 
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}



<div class="box mask-image"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box bg-inline-text"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box stroke-text"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box gradient-text"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box line-clamp"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus rem deserunt deleniti nobis molestiae! Quidem excepturi accusamus odit blanditiis quae est commodi inventore quaerat fugiat, quas quia assumenda nam reprehenderit facere dolor animi eius, dolores distinctio earum soluta? Fuga iusto et reprehenderit officiis! Minima saepe quae omnis officiis, accusamus impedit earum mollitia voluptas vero eos aperiam totam magnam dolorem aliquam!</p></div>


Памятка редко используемых css правил
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
В какое время года деревья сбрасывают листья?