• Вкторна графика
• PSD
• Flash
• Снимки
• PNG
• Темплейти
• Design Works
• Design Appreciation

Надявам се да е полезно

Имаме удоволствието да Ви съобщим, че новият ни сайт за дизайн е онлайн. Сайтът се намира на адрес: dz.linkovete.com.

Какво представлява?

Сайтът има за цел да презентира добри дизайни на сайтове от мрежата, като заедно с това дава възможност на посетителите да гласуват за публикуваните сайтове. Целта е да се направи едно своеобразно състезание между публикуваните сайтове и всеки месец да има излъчен победител, като цялата концепция на сайта може да бъде развивана в различни аспекти – месечни, годишни победители, победители по категория, таг или автор.

Каква е глобалната цел на такъв сайт

Подобни сайтове-галерии има доста, и в това отношение няма какво ново да кажем или предложим, но смятаме, че такъв сайт е нужен на българските уеб дизайнери. Тук те могат да покажат последните си творения, да видят как се справя конкуренцията, или просто да си “сверяват часовника” с последните тенденции в тази сфера.

Нашата цел е да направим така, че този сайт да стане престижно място в което всеки да може да коментира, гласува или да получи оценка за своята работа.

Тази цел е непостижима без активното участие на публиката, защото без нейния глас целия смисъл се губи. Искрено се надяваме, че този сайт ще Ви хареса и ще бъде редовно посещаван от Вас. От наша страна ние обещаваме, да публикуваме ежедневно поне по един нов сайт, така, че винаги ще има какво да се види.

Искрено желаем да получим коментари и идеи от Вас за новия сайт.

В днешно време този похват много радко се използва, може би единствено в печатните издания или книжките с приказки. Какво означава “бита буква”? Това е похвата при който при започване на глава от книга или статия първата буква е доста по-голяма от останалите и стои някак като отделена от самия текст.Ето и пример как би изглеждал текста с такъв похват:

Сега как да се направи подобен ефект с CSS и без използване на картинки?

Определено в HTML-а няма нищо специално, което да се пише – прост текст заграден със таг за параграф.

[cc lang="html"]

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec pede. Quisque
malesuada sagittis odio.

Quisque suscipit convallis sem. Nullam tincidunt
odio quis urna. Proin pharetra. Etiam imperdiet. Cras
condimentum neque ac lectus.

[/cc]

В CSS-a се ползва следния код, който придава ефекта бита буква:

[cc lang="css"]
p.special:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
color: red;
font-family: “Times”
}
[/cc]

Ключът тука е ползването на :first-letter. При примера даден по-горе този CSS ще украси с бита буква само първия параграф, защото ние сме специфицирали, че този стил се отнася само за параграфи с клас special. Ако махнем .special от дефиницията на стила, тогава битата буква ще стилизира и втория параграф.

В заключение бих казал, че ефекта от това е според мен е спорен дори според мен е “дефект”, но дизайнери има всякакви и точно защото на мен ми натресоха дизайн с такъв похват седнах да напиша този пост.

Добавяне на градиент на тест

Тук нещата са следните: позтавят задача да се направи дадено заглавие с ефект като този:

Но, като допълнително условие се изисква текста да може да бъде редактиран през админ панела на страницата от някой маркетингов “специалист”.

Какво може да се направи? Тук нещата стават малко по-хакерски, или поне колкото се отнася то IE. Аз лично мразя да плолзвам някакви CSS приоми, който определено не са от най-стандартния тип и още по-конкретно, когато css дефиницията е заградена с [if lt IE 7]

Обаче не сме ние тези, който поставяме задачите – ние ги изпълняваме за това ето как може да удоволетворим нуждите на маркетинг-а.

Нека за този пример задачата да е: Заглавието на всяка страница да е “ефектно” като примера показан по-горе. Т.е. всички <H1> тагове да са украсени така.

Ето как трябва да изглежда HTML-a за H1 таговете

[cc lang="html"]

Article Title

[/cc]

Забележете, че във тага H1 има допълнителен <span> таг.

Това е кода, който ще важи за Gecko браузерите като FireFox.

[cc lang="css"]
h1 {
font: bold 330%/100% “Helvetica”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;

}
[/cc]

а това пък трябва да се постави в хедъра на страницата за IE:

[cc lang="css"]

[/cc]

Вертикално центриране на текст с line-height

А ето и как може да се направи:
[cc lang="html"]

[/cc]

[cc lang="css"]
div.vertical{
height:100px;
border: 1px solid #888;
background-color: #efefef;
text-align: center;
}
div.vertical *{
margin:0;
}
div.vertical p{
line-height:100px;
}
[/cc]

Позициониране в обсолютния център

Тук няма даже да се хабя да пиша. Има прекрасен пример за това как се прави. Просто ще дам линка:
Dead Centre

Ето и готовите примери описани в този пост.

Надявам се да ви е било полезно.

Има лек фейслифт на логото на сайта благодарение на Васил Камарашев от DobaviGo.com за което сме му много благодарни!

Айде, чакаме и други майстори на фотошопа да помагат.

Незнам как е при вас, но това за мен е вечният проблем.

Днес попаднах на една добра статия от Matthew James Taylor в която той описва с примери различните видове layout-ти. Надявам се да е полезна.

радваме се да съобщим, че екипа работи неуморно и безпочивка, за да обнови дизайна на it.linkovete.com. Обновлението има за цел да улесни използването на мрежата както и да придаде модерна визия на сайта.

Надявам се да Ви хареса.