120 днів назад Створюючи хороший СДЛ сайт ми багато часу проводимо над роботою з його дизайном. Хочеться щоб він виглядав просто ідеально, тому увагу приділяємо навіть дрібницям. Зазвичай все потрібно підправляти в Photoshop, але зараз я розкажу як створити дуже красиву кнопку за допомогою всього лиш CSS3.
Для початку задамо основу для нашої кнопки:
border: 1px solid #5d9046; color: #fff; text-transform: uppercase; font-family: Arial, Helvetica, Sans-Serif; text-decoration: none; width: 156px; font-size: 14px; font-weight: bold; padding: 8px 0; text-align: center; display: block;
Результат після першого кроку
Зріжемо гострі кути заокругливши їх:
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Результат після другого кроку
Для краси додамо нашій кнопці тінь:
text-shadow: 1px 1px 1px #666; -moz-box-shadow: 0 1px 3px #111; -webkit-box-shadow: 0 1px 3px #111; box-shadow: 0 1px 3px #111;
Результат після третього кроку
Ну і наостанок зробимо колір кнопки градієнтним.
background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */
Фінальна версія кнопки
Ось і готова наша кнопочка в ситі web 2.0. Якщо погратися ще із :hover, то можна придати їй ще більшої краси. далі…
Часто нам потрібно юридические услуги украина, але не завжди ми знаємо де їх знайти. Раджу скористатися сайтом legalaid.kiev.ua. Хороші спеціалісти завжди раді вам допомогти.
- Який сайт створювати: фіксований чи резиновий
Таке запитання часто виникає при створенні нового сайту. На рахунок цього хочу висловити свою думку.
Що таке “резинова верстка сайту” – сайт який змінює свою ширину залежно від дозволу екрану користувача. Як правило 100% гумових сайтів не буває c урахуванням існуючих моніторів приміром 1680 × 1050 або 1920 × 1200, як буде виглядати сайт? Хоча може ви й зустрічали. Тому беруть діапазон від ~ 980 px до 1280 px по ширині.
Переваги гумової верстки бачу тільки для промосайтів, коли потрібно рекламою товару забити всю область екрану, зробити це ефектно, великі зображення чи флеш.
Для інформаційних сайтів з текстовим контентом: блоги, магазини, форуми та інше – резинова верстка неприйнятна – контент плаває, дуже рідко який верстальщик може зробити якісну резинову верстку і тут звичайно потрібно робити відразу кілька макетів, що б показати як буде виглядати сайт при 2 -3 розширеннях монітора. Виходить що практичних переваг “резинової верстки” немає, але багато зайвої роботи і коду.
Що таке “фіксована верстка сайту” – сайт який незалежно від дозволу монітора користувача завжди по ширині однакового розміру.
Тут я бачу тільки плюси:
- Контент статичний і не бігає по сайту;
- Не потрібно турбуватися про те як виглядає сайт у відвідувачів з різними моніторами;
- Самого коду сайт менше і відповідно сторінка швидше завантажується.
Якщо Ви, так само як і я – не дизайнер і не верстальщик, то швидше за все для створення своїх сайтів берете (ну або купуєте) готові шаблони.
Але те, що знаходиться в паблік, вже заїжджене і сайти з однаковими шаблонами зустрічаються досить часто.
Замовляти дизайн для перспективних СДЛ – хороше вкладення грошей. Але що ж робити із сумнивними по перспективі сайтами, або взагалі дорами чи сателітими. Їх теж треба якось зодягти. Ту суму, що ми би віддали за дизайн краще вкласти в просування.
Унікалізація шаблона
Вихід є – переробляти шаблони.
Роботи пошукових систем не навчилися бачити зовнішній вигляд сайту, зате чудово розуміють його структуру. Тому заміною зовнішнього вигляду (шапка сайту, іконки і т.п.) можна домогтися лише візуальної унікалізації, що підійде для СДЛ, але для ПС залишиться колишньою.
Впливає це якось на траст сайту з боку пошукових систем, чи ні, цього поки що ніхто з упевненістю не може сказати. Але все ж таки краще перестрахуватися.
Особисто я вважаю, що шаблонний дизайн – лише одна з ознак ГС. Навряд чи серйозні проекти, орієнтовані на людей, будь це сайт-візитка чи дошка оголошень, стануть використовувати готовий шаблон. У крайньому випадку додадуть все одно в нього щось своє, перероблять під себе.
Чим більше сайт відрізняється від інших, тим краще. В такому випадку “спалити”, що це черговий згенерований по-швидкому ГС, боту буде складніше.
Отже, змінити потрібно:
- назви зображень
- назви класів і стилів CSS
- кольори і шрифти
- розташування блоків
- сміття
Зображення
Все просто – потрібно перейменувати всі графічні файли, які використовуються в шаблоні. Зазвичай зберігаються вони в папці images /. Також необхідно точно такі ж зміни зробити в посиланнях на ці зображення в файлах шаблону.
Класи та стилі CSS
Зазвичай стилі CSS зберігаються у файлі style.css. Потрібно змінити всі назви стилів. Наприклад, назва стилю Menu міняємо на Newmenu.
І не забути поміняти файлах шаблону назви відповідних класів.
Кольори і шрифти
Змінити у файлі CSS всі кольорові гами на кілька пікселів.
Приміром, колір # 000000 поміняти на # 000025. Візуально це не помітно, але колір вже інший.
Також варто поміняти шрифти (наприклад, з Times New Roman на Arial) і розмір на 1-2 пікселя.
Розташування блоків
Можна поміняти місцями деякі блоки. Або ж додати подібних. Змінити відступи.
Сміття
Сюди відносяться коментарі, посилання на сторонні ресурси (іноді буває важко знайти або ж їх шифрують). Це все потрібно видалити. Також варто розбутися різних картинок, блоків, та інших елементів, які вам не потрібні. Тут головне стежити, щоб дизайн не “поплив”, тому краще робити бекапи шаблону.
Ось такими діями можна унікалізувати шаблон для пошукових систем. далі…
Перегляд Psd
Не на всіх компютерах встановлений Photoshop. Але інколи потрібно переглянути psd файл.
Що ж зробити коли у Вас не встановлений Photoshop, а потрібно переглянути вмістимість psd файлу. Безвихідних ситуацій небуває. Зробивши деякі дії, ми зможемо переглядати файли як звичайний jpeg.
1. Скачуємо psicon.dll
2. Копіюємо скачаний файл у вказану директорію C:\Program Files\Common Files\Adobe\Shell
якщо такої директорії, або \Adobe\Shell або \Shell неіснує, то створіть їх.
3. Створіть файл Photoshop.reg і впишіть в нього наступне:
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\SharedDLLs]
«C:\\Program Files\\Common Files\\Adobe\\Shell\\psicon.dll»=dword:00000001
[HKEY_CLASSES_ROOT\.psd\ShellEx]
[HKEY_CLASSES_ROOT\.psd\ShellEx\{BB2E617C-0920-11d1-9A0B-00C04FC2D6C1}]@=»{0B6DC6EE-C4FD-11d1-819A-00C04FB69B4D}»
[HKEY_CLASSES_ROOT\CLSID\{0B6DC6EE-C4FD-11d1-819A-00C04FB69B4D}]
@=»Photoshop Icon Handler»[HKEY_CLASSES_ROOT\CLSID\{0B6DC6EE-C4FD-11d1-819A-00C04FB69B4D}\InProcServer32]
@=»C:\\Program Files\\Common Files\\Adobe\\Shell\\psicon.dll»
«ThreadingModel»=»Apartment»
4. Запускаємо створений файл Photoshop.reg.
Якщо все зроблено правельно, то Ви зможете переглядати psd файли так як інші графічні файли.
