Архив Категории: Дизайн

Дизайн

5 генераторов CSS3

Жизнь становится проще, когда приходят они — генераторы: новичкам они помогают добиться результатов без глубоких знаний и вообще освоить принципы работы, а людям с опытом — сэкономить время.

Вот несколько генераторов CSS3-кода, которые показались мне наиболее полезными.

Ultimate CSS Gradient Generator
Помню, вид градиента, созданного не в графическом редакторе, а парой строк кода поразил меня: это буквально казалось чем-то магическим. Но, как и всегда, со временем магия превращается в обыденность. Представленный генератор, на мой взгляд, обоснованно использует слово «ultimate» (максимальный, предельный) в своем названии: на первый взгляд кажется, что параметров совсем немного, но стоит только начать с ними работать, как сразу понимаешь, что добиться можно многого.

Button Maker
Для желающих создать особенную, свою кнопку. Вы можете изменить размер кнопки, шрифта и округления углов (данные параметры редактируются «на глаз» при помощи полосы прокрутки), градиент (верхний и нижний), цвет верхней границы, цвета текста и самой кнопки в «спокойном» состоянии, при наведении и нажатии. Для того, чтобы увидеть сформированный код достаточно нажать на саму кнопку.

CSS Border Radius Generator
Симпатичный генератор округления углов рамки, который может многим показаться слишком простым и малофункциональным, однако лично меня этот минимализм и подкупил. Указываем значение для каждого угла (или одно общее) и получаем желанный код (WebKit, Gecko, CSS3).

CSS3 Shadows Generator (Box-Shadow)
Добавление тени элементу с использованием следующих параметров: размер (длина тени), цвет, прозрачность, размытие, вид тени (внешняя или внутренняя), сдвиг (по горизонтали и вертикали).

В конце я хотел бы выделить css3.me — на мой взгляд, наилучший вариант, для начального уровня, который совмещает в себе функции вышеприведенных генераторов, оставаясь при этом чрезвычайно простым и понятным.

Дизайн

Начинаем изучать CSS3

В простого обывателя или человека, пожелавшего освоить веб-программирование, одно лишь название — «Каскадные таблицы стилей третьего уровня» — может вселить ужас. CSS3, конечно, выглядит менее устрашающе, но, являясь, по сути, лишь аббревиатурой английского Cascading Style Sheets, не становится от этого понятнее.

Не претендуя на звание глубокого специалиста в данной области, скорее наоборот, не отрицая поверхностности своих познаний, свойственных всякому любителю, я постараюсь в последующих своих публикациях осветить ряд вопросов, связанных с CSS3, с которыми мне довелось столкнуться. Данные записи будут отражать мои личные опыты по работе с кодом, поэтому вполне возможно опытный человек найдет в них недостатки, которых, безусловно, я постараюсь всеми силами избежать.

Впрочем, достаточно пробежаться глазами по следующей сравнительной таблице, чтобы понять, что с проблемами может столкнуться даже опытный программист: масштаб нововведений и многочисленность уникальных браузеров дадут (и часто дают) о себе знать. Приведенная таблица довольно красочно (в том числе, в буквальном смысле) иллюстрирует насколько революционные изменения способен привнести CSS3 на экраны наших компьютеров, планшетов и телефонов: достаточно сказать, что некоторые нововведения браузеры пока не способны воспроизвести (или делают это некорректно).

В общем, нет никаких сомнений, что изучение CSS3 будет интересным и полезным.

Дизайн Жизнь

Куртка из QR кодов «QRтка» — современные технологии на службе моды

В последнее время QR-коды стали появляться повсюду и даже самых неожиданных местах. Вот еще один оригинальный пример использования: какой-то рукоделец изготовил такой вот прототип QRтрки:

Куртка из QR-кодов

Ну зачем этой женщине такой фасон и внимание? Она очевидно даже и не знала, что понравившаяся ей курточка будет привлекать столько внимания на улицах:)

Даже в нашем скромном немэйнстримовом городе QR коды стали массово появляться на улицах. Стали очень популярны большие наклейки на заднем стекле авто с зашифрованной ссылкой на сайт клуба автовладельцев или о продаже авто. Хотя это всё как-то не очень практично: смартфоны есть не у всех, водитель из едущей сзади машины ничего не поймет, а попытавшись воспользоваться телефоном, будет весьма сложно объяснить причину ДТП инспектору:)

Но это лирика, в действительности, QR коды все сильнее внедряются в нашу жизнь. Но далеко не всегда они используются в благих целях. Уже у нас, в России, известны случаи мошенничества, когда нормальный QR-код, размещенный на уличном носителе переклеивался на подложный, несущий в себе вредоносную ссылку на зараженный сайт с вирусами, а может и просто сайт конкурента или просто искаженную информацию.

В общем, технология эта не без изъянов… Человеку нужно быть внимательнее, и смотреть на правильность ссылки, прежде чем на нее перейти.

Ну а самое лучшее решение — научиться читать QR код самостоятельно, чтобы заранее знать что там зашифровано:)

Дизайн

Мигель Эндара, «Герой»

Мигель Эндара, «Герой»

Картина Мигеля Эндара (Miguel Endara) «Герой» (Hero) была нарисована за 210 часов путем нанесения… приблизительно 3,2 млн точек.

Процесс создания этой выдающейся работы художник зафиксировал на камеру:

Дизайн

Фрактальные стулья — матрешки

Стул-матрешка, навеянный фракталамиЕще одно интересное дизайнерское решение вдохновленное фракталами, а может быть русской матрешкой.

Кликните по картинке — там стул будет показан со всех ракурсов.

Дизайн

Логотип Олимпийских Игр в Лондоне 2012 сосет!

Тайный замысел организаторов Олимпиады в Лондоне раскрыт!

На самом деле на логотипе изображена банальная сцена жизни семейства Симпсонов: Лиза Симпсон Сосет у Барта! Шок! А кто поспорит? Картинка прорисована с точностью до деталей:

Замысел логотипа Олимпиады в Лондоне 2012: "Лиза Симпсон сосет у Барта!". Секрет раскрыт!

Логотип Лондон 2012 — его истинный смысл.

Что бы там организаторы не говорили про свой истинный замысел, а он на самом деле на поверхности! Просто какой-то дизайнер поиздевался, закамуфлировав такую вот пошлятину в стиле кубистов-поклонников-maincraft. Лично я теперь не могу смотреть на заставки в ТВ трансляциях без умилительного хохота в душе! Как же это все-таки здорово, когда в мире есть такие вот дизайнеры с фантазией.  Которые могут впарить такое вот творение комитету проведения Олимпиады 2012 в Лондоне. Каждый раз появляется чувство гордости за этого дизайнера!

Теперь сотни людей купят такие майки только потому, что в логотипе олимпиады есть тайный смысл! Отличный маркетинг, пусть и на грани дозволенного! Каждый видит то, что ему хочется видеть. Ну кто в этом логотипе разглядит «2012»? Скорее можно увидеть название города «Zion» из Матрицы. Ну а теперь там конечно только Лиза на коленях перед Бартом!

Ниже еще немного камней в сторону Лондона 2012 в отношении их Политики размещения ссылок на официальный сайт. читать далее »

Дизайн Программирование

Блоги на Tumblr: Pretty colors

Pretty colors
В минуты мучительного поиска при выборе цвета для кода, а также просто из любопытства, можно уделить немного времени на пролистывание этой, кажется, бесконечной разноцветной ленты с HTML кодами. Очень интересная задумка.

Дизайн

Фракталы в природе и созданные человеком

Фото подборка встречающихся в природе или искусственно созданных фракталов. Ну или просто качественный Фотошоп. В общем, порция вдохновения для дизайнеров:

Дизайн

PixelArt картина «Парад Победы на Красной площади»

Чрезвычайно детально прорисованная Pixel-Art картинка Парада Победы 9 мая на Красной площади в Москве (кликните, чтобы увеличить и посмотреть все детали):

PixelArt Парад Победы нв Красной площади в Москве

Мастерство, детализация и кропотливость заслуживают огромного уважения! Как и подвиг наших дедов! Огромный труд на благо победы и добра!

P.s. Жаль, что не удалось выявить автора.

Дизайн

Секс* и шаблоны WordPress

Бродя по Интернету, наткнулся на весьма удачный, с моей точки зрения, рекламный ход — привлечения внимания ярким броским интригующим словом, пусть и ни как не связанным с объектом маркетинга. Вот собственно, сам этот рекламный баннер:

Секс - слово для привлечения внимания

Привлекает, хотя немного сначала и дезинформирует. Но интерес явно придает! Притом абсолютно нужной целевой группе студентов-программистов и молодых IT-шников. Ведь секс — это действительно очень броское слово для привлечения внимания молодого индивидуума… Особенно, если читаешь какой-нибудь приличный сайт — и тут такое!

Этот баннер рекламирует весьма неплохую базу платных шаблонов. В том числе там есть шаблоны и для WordPress. Средняя цена — 2000 рублей за готовый шаблон. В принципе, достаточно приемлемый вариант для быстрого изготовления уникального дизайна сайта. Но не стоит забывать, что есть и бесплатные базы шаблонов. Причем самая обширная и интересная из них — это официальная база бесплатных шаблонов WP. Я лично отдаю предпочтение именно бесплатным шаблонам по нескольким причинам:

  1. Они бесплатные, а точнее «свободные» — их нельзя перепродавать, а также нужно оставить ссылку на автора темы.
  2. Чаще всего они более грамотно построены, с применением всех последних тенденций в Веб-разработках. Поэтому, лучше скачать самую свежую версию интересной темы и уже дорабатывать, кастомизировать, её, а не какую-то пусть и более красивую, но менее современную тему.
  3. Качественные стандартные темы часто обновляются. А купленную навряд-ли кто-то будет поддерживать. Но по обновлению тем — это отдельная большая история…