CSS и JavaScript чрезвычайно мощные инструменты для дизайнеров и разработчиков.
Однако, иногда it’ Сложно придумать одной отличной идеей, что позволит решить проблемы, стоящие перед вами прямо сейчас.Хорошая новость: почти каждый день дизайнеры и разработчики придумали свежую и умный CSS приемы и методы, и делиться ими с другими разработчиками онлайн.Мы регулярно собираем все эти трюки, фильтровать их, сортировать их, изменять их и подготовить их для Smashing Magazine readers.
В этой статье мы представляем 45 полезных CSS/JavaScript-techniques которые могут помочь вам найти умные решения некоторых из ваших проблемах или просто черпать вдохновение в том, что возможно с CSS.Мы покрываем интересное CSS-техник, меню навигации, CSS типографии, CSS списков и CSS кнопки.В центре внимания этого поста лежит на CSS, пожалуйста, обратите внимание, что некоторые из методов, использование JavaScript и PHP для повышения functionality.
Пожалуйста, обратите внимание, что это первая часть нашей большой облавы на свежий CSS / JavaScript-методы.Другие методы (CSS таблицы, макеты CSS, CSS для мобильных и CSS форм) будет показан в следующей статье.Так don’ забудьте подписаться на нашу RSS-feed и Следуйте за нами на Twitter похожие статьи и поток полезных ресурсов.Пожалуйста, сообщите нам, что мы должны изменить или улучшить в наших будущих сообщений
Мы знаем, что многие читатели устали от “ lists” циркулирующих в Интернете, но мы уверены, что подавляющее большинство наших посетителей выиграют от этой должности формате и будет найти по крайней мере некоторые из методов описаны в этойСообщение useful.
Интересные CSS Techniques
Строительство нового визуального Annotations
Эти записки накладки состоят из двух основных элементов, с наложением блеск и границы с прозрачностью.Очень интересный, но простой метод, с помощью агентства Дизайн ZURB, дизайнеров, которые написали Серия articles на Smashing Magazine, как well.
Sexy Альбом Музыка Overlays
Этот Статья показывает, как стиль вашей музыки потоков и предоставляет вам некоторые графики, чтобы сделать so.
Красочные часы с CSS & jQuery
Это руководство описывает, как можно создать часы, используя основные CSS и JavaScript.
Как создать глубину и хороший 3D-ленты только с помощью CSS3
Мы будем использовать коробку-тени для создания раскрывающегося тень с RGBA, цветовой модели, которая позволяет оптимизировать контраст с любым фоном.RGBa является стандартной модели RGB (0,0,0 — 255,255,255), и это добавляет последний вариант (а) для непрозрачности.Мы можем использовать эту модель и на другие свойства, и он работает с новой browser.
Расширенный Timeline события с PHP, CSS & jQuery
Это Расширенный Хронология событий используется с помощью PHP, MySQL, CSS и jQuery.Результат: хорошее линии времени с интерактивными событиями.Добавление новых будет так просто, как вставить строку в database.
CSS навигация Menus
CSS 3D Meninas
“ I’ нас взяли классические краски Maids Почета (Las Meninas) и создал CSS псевдо-3D / Parallax эффект.Это чистый CSS, JavaScript нет или флэш занимается.Он был протестирован и работает на Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 и Konqueror 3.5, и это подтверждает, too.
Sproing!– Сделать упругой Thumbnail Menu
“ В текущей попытка предложить альтернативные методы, чтобы украсить меню, я собрана упругой меню миниатюр.Это увеличивает пункты меню, когда они парили над и пункты меню расширения upwards.
Как создать простой и эффективный Sub ЧСА с определением Lists
“ Когда нам нужно простое и эффективное на странице навигации, либо Перейти к содержимому на странице или перевернуть другой точке зрения, мы используем элемент дл.Его субэлементов, DT и DD, сделать это очень легко для нас, чтобы создать встроенные ссылки с четкой этикеткой.Здесь we’ Re собираюсь поделиться с вами быстрый, легкий метод для того, как we’ будем использовать CSS, чтобы сделать it.”
Sticky SideNav Макет с CSS
Узнайте, как создать фиксированный макет sidenav для вашего блога или веб-сайта.Наличие фиксированных sidenav пригодится при работе с веб-сайтов блогов стиль, в котором содержание чрезвычайно высок, и существует потребность в хорошем количестве прокрутки.Фиксированной навигации позволяет пользователю круиз по информации без прокручивания назад до самого верха, чтобы перемещаться по остальным site.
Ненавязчивый Выпадающий Page Changer
С помощью < select> выпадающее меню для создания навигации не так часто, как это было раньше, но это все еще вокруг.Это были сорваны на довольно хороший за то, что недоступно / навязчивым.Действительно много сценариев вы найдете там для создания меню, подобные этому, таким образом.Облом.Давайте сделаем тот, который работает с или без JavaScript.
CSS навигация: No JavaScript, JQuery или изображения обязательно, бесплатные CSS навигация / Разбивка на страницы с Tooltip
CSS-навигации / бар без нумерации страниц JavaScript.Существует подсказке при наведении курсора мыши на ‘ previous’ и ‘ next’ page’ S пуль, что делает навигацию easier.
как код Перекрытие вкладок Главная Menu
Главное меню навигации является то, что часть веб-дизайна, что делает весь сайт выглядел живым и полным.Но самый распространенный тип стиля меню навигации сих пор используется много есть вкладки меню навигации.Вот учебник о том, как кодировать перекрытия вкладок menu.
Решение для очень длинных раскрывающихся Menus
“ Мне нравится быть уверены, с поста названия, но на самом деле в этом случае possible решения для очень длинных выпадающих меню.Проблема с длинными выпадающие в том, что выпадающий сама может пойти ниже “складка” на сайте.То есть, ниже видимой области окна браузера.Таким образом, для того, чтобы получить доступ к этим пунктам меню вниз, вам нужно прокрутить окно браузера.Для тех из нас с колеса прокрутки некоторого рода на нашем мышей (мышей?), Это не имеет большого значения.Для тех, кто не те, нижние пункты меню полностью недоступной, потому что использовать браузер прокрутки мышью средства от меню (и, вероятно, иметь его закрытия) ”.
Mega Drop Down Menu ж / CSS & jQuery
При правильном использовании, мега выпадающего меню может быть весьма эффективным для крупных веб-сайтов масштабе.Let’ S экспериментировать с различными способами осуществления этой техники.Учебник по Сох Танака, Smashing Magazine’ регулярного author.
CSS Типография и тела Copy
Как создать Прохладный текст анаглифические эффект с CSS
анаглифов те удивительные 3D-изображения, которые создаются путем зачета два из красного, зеленого и синего каналов, и рассматриваются с теми, тормозной ищете 3D-очки с разноцветнымилинз.Я не знаю, если этот эффект работает по-настоящему, как я, к сожалению неуместными мои 3D-функции, но это довольно прохладно текстовый эффект, тем не менее!Давайте взглянем на то, как подобный стиль может быть создан для прихорашиваться вашего веб-дизайна, в то время как с учетом семантики и избегаяПовторение любого markup.
типографские работы planner
Введите это, немного HTML / CSS типографские работы планировщика.При использовании некоторых супер-семантический HTML и CSS тире можно изготовить красивый ищет еще невероятно простой планировщик работы для вас и ваших staff.
Разбавление текста в Webkit (Safari)
Safari имеет не очень прекрасный способ наполнитель до текста с помощью суб-пикселей рендеринга.В предыдущих версиях Safari, это было установлено с текстом тень декларации, но так как Snow Leopard, что метод не работает.К счастью, есть alternative.
Псевдо выпадения Caps
Они были вокруг в то время как сейчас, появляющиеся в журналах, печатных и сейчас в Интернете.Дизайнеры и разработчики экспериментировали с несколькими обходные пути от использования встроенных стилей к использованию изображений замену, но с каждым из этих решений есть проблемы.Например, то, что происходит, когда вы воссоздать ваш сайт и решить, что вы больше не хотите загружать изображения буквицы, вы теперь собираетесь оставить со сломанной изображения в начале каждого поста, что ранее вы уже создали, этоОчевидно, предполагается, что вы не использовали текстовый абзац.Если вы решили спуститься по маршруту встроенный стиль, то ваш просто плохо, просто очень bad.
Как создать идеальный предварительного Tags
Если вы работаете с веб-сайта, что есть много примеров кода, вы знаете, как важно, чтобы провести некоторое время укладки &tl; pre> элемент.Когда осталось без стилей, дикие < pre> теги будут калечить ваших отформатированный контент и уничтожить макет вашего сайта.Различные браузеры лечения < pre> теги совсем по-другому, меняя сильно их обработку по умолчанию шрифта-размера, прокрутки-рендеринг, а также переноса слов.Действительно, получаяваши отформатированный код, чтобы выглядеть последовательным, удобным, стильным и во всех браузерах задача не из легких, но она, безусловно, может быть сделано.Эта статья объясняет все, что нужно для создания надлежащих < pre> tags.
Улучшение вашего веб-типографики с исходным shift
базовый невидимая линия, на которой все символы типа сидеть, хотя, конечно, некоторые символы (в том числе ‘J’, ‘р’, ‘г’ и ‘у’)имеют подстрочные, которые висят ниже базового уровня.Базовый сдвиг включает в себя перемещение символов вверх или вниз по отношению к базовому и ее эффективного использования может сделать огромную разницу в профессиональный вид вашего типа.Хотя смещение базовой линии традиционно части использования таких инструментов, как InDesign или Quark, есть способы добиться того же результатов с помощью CSS.
Typograph – Масштаб & Rhythm
Эта страница как эссе и инструмент.Она ставит своей целью изучить, как два взаимосвязанных понятия, часто игривое, но иногда дерзко, можно поощрять, чтобы танцевать в веб-страницы.Перетащите цветные квадраты по шкале бросить эти слова заново.По большей части, этот текст просто либретто к производительности, которую вы собираетесь играть на it.
Необычные котировки с JQuery, AJAX & CSS
Узнайте, как создать модный система рейтинга цитаты, которая будет отображать целый ряд известных цитат и позволит посетителям сайта оценить их favorites.
