Стилизиране на блок

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
В този урок ще говорим за стилизирането на блокови div елементи.
Layout -a на една страница, в повечето случаи е изграден от такива блокови елементи.
Когато разберете как да стилизирате тези елементи с картинки, ще може да направите почти всякакъв вид Layout-и.
Тук съм направил един блок.
Сложил съм максимално много ефекти.
Вътрешни сенки, градиенти отгоре, и отдолу както и вътрешно осветяване.
Слагам guide линии, в крайщата му, за да може да го изрежа по-правилно.
Избирам Slice инструмента.
Първо имаме постоянен фон, който е в този цвят.
Правя един slice тук, който искам да е от един пиксел.
Сега да разгледаме долната част, както и горната част Получих три картинки, които ще наименувам.
"bgtop" Тази ще я напиша "bgbot" На еднописеловата линия "bgmit".
Избирам Експорт.
Избирам Jpeg и High Останалите снимки ги изтривам, оставям само тези които ми трябват.
В предната папка имам този index.
html и style css, които в момента са празни.
В индекс html темплейта с коментиран style css.
Tук ще задам един div.
ще го наименовам клас box и ще сложа една точка вътре.
Отивам тук в stylizer и го избирам за направя едно правило.
Задавам width 500 пиксела, height 400 пиксела.
и за фон в сиво.
Искам да поставя тази горна картинка на фона, за целта ще направя така: background image.
и от тук ще напиша url (images bgtop.
jpg)
Тя се намира images и е bgtop.
jpg.
Имайте предвид че този път е релативен спрямо мястото на css файла, а не на index html.
Те са в една и съща директория, така че в момента няма значение.
Вижда се че фонът се повтаря.
Не искам да е така затова, за background-repeat да е No-repeat.
След което ще сложа едно правило за да съм сигурен, че ще е в горния край.
Background possition
Top Center Сега ще наместя Width за да го хване точно.
Нека да видя размерите му директно от тук.
640.
Долният размер не ме интересува.
640 пиксела.
Ще преместят box в центъра.
За да се вижда по-добре.
Сега искам да сложа елемента отдолу единия вариант, стария вариант, е да сложим още един div в този div.
Това е по-неправилния вариант.
Затова ще го направим с css 3.
Тук където съм сложил background-image, Мога да сложа още един background image.
"bgbot" директно след него.
Трябва да има запетайка между тях.
Виждате какво представлява.
Тук ще се опитам да го разтегля, но не мога
всъщност мога да го направя url(images bgtop.
jpg), url(images bgbot.
jpg)
Същото нещо трябва да го направя и тук.
Buttom Center Kакво се получи? Със запетайка слагаме няколко фона на един и същ div елемент, казваме на първият да е top center, a на втория дa e buttom center, пак със запетайка ги разделяме.
Сега трябва да сложи и трети, който да е по средата url (imagesbgmit.
jpg)
Проблема е, че тази еднопискелова линия сега или отдолу или отгоре не се повтаря.
Искам първия фон отгоре, да не се повтаря, вторият фон отдолу също не се повтаря.
А третият фон да се повтаря, затова ще сложа тук repeat Y.
Получи се единствения проблем е, че тук имаме една линийка, която се е получила, защото не съм изрязъл правилно.
Това което исках да ви покажа е, че колкото искате толкова може да увеличавате вече тази кутийка.
Разбира се ще трябва да и сложите минимум height.
Нека минимума да е 330.
Понеже когато се намали прекалено много, вече не изглежда добре.
Вътре може да слагате всякакви текстови елементи, ако искам да заобля краищата ще използвам "+border radius", за да не слагам повече правила за borderradius.
Използвам директно системата на stylizer, която накрая ще произведе три-четири правила 25 пиксела.
Сега вече имаме заоблена кутийка.
Тази линия тук мога да я поправя, като избера този Slice и цвета в него.
Избирам copy, след това paste и го сложа тук.
Увеличавам еднопикселовата линия,
се получава това.
След което ще избера една четка,
Принципно това вече е кръпка, не би трябвало да стигаме до там.
Направих градиентите прекалено дълги и не се виждаха къде свършват.
Сега ще избера save for web and devices, ще избера само тази картинка.
Save.
Selected slices.
Replace.
След refresh, всичко трябва да е както трябва.
Може би му трябва нещо повече от refresh.
Наложи се да рестартирам програмата.
Понеже наистина не искаш да обнови картинката.
Това най-вероятно е заради трите фона, които сложихме тук на едно и също място.
Сега вече няма линия между повтарящия се цвят и този отгоре.
Създаването на такива кутийки със стил, които могат да се променят и на дължина, е доста по-сложно.
Или пък ви лимитира, в създаването на такива фонове.
Всичко това е въпрос на вашата креативност.
Може да слагате фонове отляво отдясно отгоре отдолу или пък тази картинка тук да е доста по-дълга.
От това което имаме в момента.
Сега вече ще може да увеличаваме Weight.
Ефектите, сенките в краищата трябва да ги добавяме допълнително на отделен файл.
Със запетайка тук, който ще е случая topcenter.
или center right Понеже сложих всичко на фона, не в картинка вътре сега мога да добавям текст.
или какво искам вътре: картинки, видео.
Ще добавя текст за да вижда.
Нещата не се получиха, защото съм задал точен height, трябва да го изтрия.
Текста разтеля самата кутийка, ще сложа padding Въпреки че не е добра идеята да е тук padding.
Никога не слагайте в контейнери padding понеже по този начин
се променя големината на кутията, по-скоро ще сложа вътре един Div.
DIV class="boxtext" Сега ще прибера този текст, и ще задам padding 25 пиксела.
Сменям му цвета.
Да го отворим в Chrome.

Въпроси и отговори

  • Защо CSS правилото url(img/im01.jpg), url(img/im02.jpg), зададено във външен файл не работи

    Живко Казаков:

    Правилата background-image: url(img/im01.jpg), url(img/im02.jpg) и background-repeat: no-repeat, repeat-y;, зададени във външният файл style.css не работят при мен. Същите правила, зададени със style атрибута в div тагът, работят съвсем коректно.

    <

    div id="block_id" style="background-image: url(img/im01.jpg), url(img/im02.jpg); background-repeat: no-repeat, repeat-y;">

    Всички останали правила, които съм задал за idто block_id във файлът style.css, като фон, размери и т.н., също си работятсъвсем коректно.

    На какво може да се дължи това? От 3те наина на задаване на CSS правила, този с атрибутът style е с най-висок приоритет, но едва ли това е причината.

    Грациела Георгиева:

    Здравей, Вероятно точно това в причината. Високият приоритет на остиляването директно в style атрибута на даден таг е причината да не работят същите неща, но написани във външен файл. Kогато пишеш във външен файл остиляване за #block_id, в един таг ли слагаш всички свойства със стойностите? А и няма кавички, може да опиташ да сложиш. И защо има две url-та? Задай го по този начин. Пример:

    #block_id {
    background: #00ff00 url("smiley.gif") no-repeat fixed center; 
    }
    
    Живко Казаков:

    Това с няколкото url-а не го знаех. В урокът дават пример даже с 3 (след 6:15 накъде). Ползвам или едното или другото. Първоначално ги сложих във външният файл, в правилата за #block_id, като в

    <

    div> тагът имаше само зададено id.

    <div id="block_id"></div>
    

    (В този пример е само с 1 url.)

    В другият вариант правилата за картинка за фон и позиционирането съм ги преместил в style тагът в div.

    <div id="block_id" style="background-image: url(img/im1.jpg); background-repeat: no-repeat;">
    </div>
    

    и съм ги изтрил от Stylizer:

    Опитах с кавики - не е това причината. Премахнах нулата от името на картинката, да не би да съм напсал главно О вместо 0, но и това не е. Впрочем, със style в div тагът си работи прекрасно, но искам да разбера, дали причината е в мен - нещо да съм конфигурирал неправилно. Друга възможна причина може да е, че Stylizer тези дни се ъпдейтна и може в тази актуализация да е причината.

    Грациела Георгиева:

    В първия случай името на изображението е с голяма буква (Im1.jpg), а във втория - с малка (im1.jpg). Вероятно това е грешката, опитай да го поправиш и пробвай отново по двата начина. :)

    Живко Казаков:

    :) Гледах спецално да не се полчи това, но се е случило. Не е това проблемът, обаче. Предположих, че причината може да е в конфликт, който се получва с правила, зададени в други външни файлове и закоментирах линковете към всички такива - не се получи. Ще създам нов html само с 1 div таг и пробвам с него. Впрочем, за HTML аз ползвам phpDesigner 8. Възможно е той да вмъква някакъв код. Освен това HTML файловете ми започват с:

    Възможно е и причината да е в xhtml форматирането и затова и тези тагове ще ги изчистя максимално.

    Грациела Георгиева:

    Аз използвам Notepad++ и когато му се добавят някои plug-in-и, както и като се направят някои настройки, работи доста добре. Достатъчно простичък е интерфейсът на ID-то. :)) Премахни всякакво остиляване и опитай само това, което си написал по-рано отново по двата начина.

    Живко Казаков:

    Получи се :) Причината се оказа в пътят към картинките. Тябва да се напише целият.

    Ето го и предишният вариант:

    Причината е единствено в пътят към картинките - трябва да бъде указан пълният път. Впрочем ползвам xampp и вероятно от там идва това изискване.

    Грациела Георгиева:

    Радвам се, че се е получило. Вероятно просто картинакта не е била в същата папка, в която е кодът. :))