Как да създадете форма на сърцето с CSS
CSS3 повишава възможността за това, което можем да изградим на уебсайтове, използвайки само HTML и CSS. Можете да намерите невероятни примери, които преди това сме представяли. Но нека не се отдалечаваме твърде много от себе си, сложният дизайн ще се нуждае от кодове, които могат да ви причинят главоболие.
Вместо това ще създадем нещо, което да ви помогне разберете първо формите и позиционирането с CSS, преди да се впуснете в по-съвършен дизайн. Тъй като Свети Валентин е точно зад ъгъла, нека създадем форма на сърцето, използвайки HTML и CSS.
Основите
По принцип можем да създадем нова форма, като свържем една или повече основни форми, като правоъгълници и кръгове. Ако разгледаме формата на сърцето, можем да открием, че тя е съставена от два кръга и правоъгълник заедно. HTML елементите са по същество квадрат или правоъгълник. Благодарение на радиуса на границата на CSS3 можем да преобразуваме правоъгълник в кръг лесно.
Започнете с добавяне на След това го правим квадратен, като посочваме еднакво ширината и височината. Изберете цвета на фона, който желаете. След това ще направим кръговете. Вместо да добавяме нови елементи, ще използваме псевдо-елементите, Заедно с площада ще имаме резултат като този: След това създаваме втори кръг с псевдоелемента Резултатите са както следва: Ние можем да комбинираме тези два еднакви стила, като групираме псевдоелементните селектори, както следва: Та-га! Имаме форма на сърцето, въпреки че все още не е в правилната посока. За да я оправим, ще използваме CSS3 Transformation. Трансформацията може да се даде на основните елементи на формата; тук, това означава площад. Когато се трансформира, псевдо-елементът автоматично ще промени позицията си след основния елемент. Тук ще въртим сърцето, така че да се вижда “стоящ”. И това е, как изглежда сърцето ни сега. Пълният код на формата на сърцето по-горе е, както следва, в HTML: А в нашия CSS ще бъде така: Забележете, че сега зададохме алфа канал на Сега, когато имаме перфектна форма на сърцето, можем заменете фона на друг цвят (например розово или червено) с лекота. Единственият недостатък тук е, че ние не можа да добави граница на формата, дължаща се на подредените елементи. Добавянето на граница ще накара сърцето да изглежда странно. С CSS3 създаването на форма като форма на сърцето вече е лесно изпълнима. Собствеността на граничния радиус ни позволява направете елементи или дори псевдоелемент в кръг. С преобразуването на CSS3 можем завъртете или преместете координатите на обекта с лекота. Вие сте ограничени само от вашата креативност и въображение!
.сърцевидна форма позиция: относителна; ширина: 200px; височина: 200px; фонов цвят: rgba (250,184,66, 0,8);
:преди и :след. Първо зададохме :преди псевдо-елементи като нашия първи кръг. Правим го квадрат с еднакъв размер по ширината и височината точно както направихме с div. След това я преобразуваме в кръг, като му придаваме радиус от 50% и го поставяме от лявата страна на квадрата. .форма на сърцето: преди позиция: абсолютна; отдолу: 0px; наляво: -100px; ширина: 200px; височина: 200px; - радиус на заобикаляне: 50%; - радиус на границата: 50%; - радиус на границата: 50%; радиус на границата: 50%; цветен фон: rgba (250,184,66) , 0,8);
:след със същите стилове като първия кръг, който създадохме. След това го позиционираме и на върха на площада. .форма на сърцето: след позиция: абсолютна; отгоре: -100px; вдясно: 0px; ширина: 200px; височина: 200px; - радиус на заобикаляне: 50%; - радиус на границата: 50%; - радиус на границата: 50%; радиус на границата: 50%; цветен фон: rgba (250,184,66) , 0,8);
.форма на сърцето: преди, форма на сърцето: след позиция: абсолютна; ширина: 200px; височина: 200px; - радиус на заобикаляне: 50%; - радиус на границата: 50%; - радиус на границата: 50%; радиус на границата: 50%; цветен фон: rgba (250,184,66) , 0.8); сърцевидна форма: преди bottom: 0px; left: -100px;. Heart-shape: след top: -100px; right: 0px;
.сърцевидна форма -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: завъртане (45deg); transform: rotate (45deg);
Резултатът:
.сърцевидна форма позиция: относителна; ширина: 200px; височина: 200px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: завъртане (45deg); transform: rotate (45deg); фонов цвят: rgba (250,184,66,1); форма на сърцето: преди, форма на сърцето: след позиция: абсолютна; ширина: 200px; височина: 200px; - радиус на заобикаляне: 50%; - радиус на границата: 50%; - радиус на границата: 50%; радиус на границата: 50%; цветен фон: rgba (250,184,66) , 1);. Heart-shape: преди bottom: 0px; left: -100px;. Heart-shape: след top: -100px; right: 0px;
rgba (250,184,66, 1) на заден план до 1 за да премахнете прозрачността. Ето какво изглежда сърцето ни.
заключение
