По умолчаниюСветлая версия
↑ перейти к списку статей

Рисунки на CSS3

Когда-то давно решил попрактиковаться и подробней посмотреть, что можно делать на CSS3. Просто так писать свойства и смотреть, что выходит неинтересно. Решил усложнить задачу и сверстать что-нибудь интересное.

В результате получилась вот такая клавиатура. Сделана целиком и полностью без картинок и скриптов.

В ход пошли css-градиенты, border-radius, :nth-child, и даже один псевдоэлемент понадобился.

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

С месяц назад сделал еще один рисунок. Получилось забавное облачко.

Делал не особо стараясь, потому код не очень красивый. Да и вообще там от пары дивов можно было избавиться точно.

И еще в Опере пока не работает радиальный градиент, потому там не так красиво.

В общем, используйте CSS3!

Кнопки для сайта

5 комментариев: Рисунки на CSS3

  1. Максим говорит:

    Все благодаря форуму ХТМЛбук-ру. Читаю там часто посты и за приметил вашу работу.
    Умельцем меня не назвать, но ваша конструкция CSS меня просто обворожила и как ни кстати подошла к моим нуждам. Я так сказать немного работаю в с MS Office и мне просто необходимо часто использовать гарячие клавиши, а ваша клавиатура мне ну просто как спасение. Спасибо большое.

    • Аблай говорит:

      Немного не понял как связана клавиатура и MS Office

      • Максим говорит:

        Все просто. Я ежедневно пользуюсь на работе с таблицами данных Excel, и просто мне необходимо как то ускорить свою работу ( так сказать, уменьшать использование мышки ) Так вот, эта клавиатура у меня просто используется как справочник, какая буква и связанная с ней комбинация отвечает за выполнение определенного действия. К примеру что бы включить фильтр данных, я не ищую его постоянно в Меню->Данные->Фильтр, а сразу наживаю Сtrl+Shift+L. Именно разобрав каждую кнопку на клавиатуре я и узнал много чего интересного, а данная заполненная форма у меня для памяти.

  2. Alpatriott говорит:

    Максим, обновите стили, чтобы у вас не прыгали кнопки в хроме. Все связано с багом самого хрома, в котором иначе учитываются бордеры у table.

  3. максим говорит:

    Ууу.. я чессно говоря хрум не устанавливал и щас уже чессно говоря подзабыл как всё делается.. Времени мало на проверку работы CSS на моем сайте.