Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Како да создадеме дијагонални линии со CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Macedonian (Македонски јазик) translation by Stefan Nikolov (you can also view the original English article)

Пред неколку дена, примив покана за Google Music. Додека ја разгледував апликацијата, забележав мал но итар трик што го користат за да создадат прозорчиња и дијагонални линии со обичниот CSS. Денеска ќе ви покажам како да го правите истото во вашите проекти!


Сакате видео туторијал?


Чекор 1: Обележување

Почнуваме со обично обележување.

Овој водич ќе биде што е можно поедноставен.

bare markup

Чекор 2

Следно, само за поставувањето, да ставиме боја на позадината и малку простор во body елементот.

Spacing

Чекор 3

Сега, ќе ставиме anchor tag - ставаме и нова боја, го болдираме, додаваме граници и сл.

Style the anchor tag

Забележувате како, кога ќе ставите широки линии, на местото каде што се среќаваат, се создава дијагонална линија? Се прашувам дали може да го користиме тоа вкрстување како раб на прозорец? Да се обидеме да го намалиме height на нула.

Zero height

Се приближуваме! Можеби сега ако ја приспособиме висината на линија до anchor tag, можеме да го собереме текстот во таа кутија!

Adjusting the line height

Чекор 4

Уште малку сме готово. Секако не ни требаа таа грда црвена линија на десната страна. Има ли начин да ја добива позадината на бојата на body -то без да ја менува вредноста на hex? Да! Го користиме клучниот збор transparent за оваа цел.

Transparent Borders

Чекор 5

Проблемот тука, е дека изгледа малку чудно кога позадината се простира на низ целиот прозорец. Вообичаената реакција е да се обнови display -от во inline. Сепак, како што покажува сликава, тоа не би успеало.

display inline

Ни треба елементот да го задржи својот облик на block за да ја испочитува 0 висината. Одговорот на ова е да се искористи display: inline-block; или да го float anchor tag, а потоа да се clear елементите што следуваат. Ќе го искористиме првото.

Многу подобро!


Чекор 6

На крај, да го намалиме div малку и веќе завршуваме!

Uh oh
Во Сафари
Во Firefox

Леле, имаме проблем. Изгледа дека Firefox и Webkit не можат да ги обработат елементите со нула висина и да ги прикажуваат inline-block

Отпрво, ова малку ме изненади. Без да користам хакирање, не можев да ги овозможам Firefox и Chrome да го обработат поставувањето како што треба. Ако најдете начин, пишете во коментар. И уште нешто, пишете во коментари за решение за проблемот.


Чекор 7

Има начини да ги работиш Webkit пребарувачите со CSS, но важно ми е да потенцирам дека вакви трикчиња треба да се користат само како последно решение. Со други зборови, не го правете ова дома, деца (освен ако не морате). Овде изгледа дека е попаметно да се користи float -и за да се заврши поставувањето. Сепак, да бидеме херои и да пробаме со други техники.

Многу луѓе не се свесни дека медиа прашањата можат да се искористат за Webkit пребарувачите. Гледајте што се случува кога користиме сопственост на webkit како услов за медиа прашањето.

Еве! Работи. Само запаметете - користете го ова само ако немате друго решение!


Конечен изглед!

Final Product

Ова е едноставна техника, но сепак, треба да ја имаме во ракавот. Сте користеле ли вакви итри трикчиња? Пишете ми во коментари!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.