Спрайты для сайта

Удивительные явления природы: гроза и молния. Малоизученные джеты и спрайты

Как известно, гроза представляет большую опасность для человека. Вернее даже не сама гроза, а атмосферные молнии. От их ударов только на территории России ежегодно погибает около 500 человек.
Кроме непосредственной угрозы жизни и здоровью человека грозы наносят большой, и очень часто, непоправимый ущерб инфраструктуре.

Для нашей планеты грозы вполне обычны.

Как использовать спрайты CSS

Каждую секунду на Земле, в той или иной ее части постоянно звучат раскаты громы, которые сопровождаются яркими вспышками молний. Но особенно часто их можно наблюдать в центре африканского континента, на севере Индии и на индонезийском архипелаге.

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

Фото

В длину молния может достигать длинны 19 км и более. При этом ее заряд достигает миллионов вольт, а температура в ее центре — 30 тысяч оС. Очень редкие счастливчики остаются в живых после удара природным электричеством. Поэтому каждый должен знать о мерах безопасности во время грозы.

Правила эти очень простые.

Во-первых, крайне опасно во время грозы находиться в открытой местности — на полях, лугах и т. д. Как только вы увидели на горизонте приближающийся грозовой фронт, то нужно как можно скорее покинуть это место. Если же такой возможности нет, то нужно найти самое низкое место. Нельзя прятаться под одиноко стоящим деревом, поскольку с большой вероятностью именно в него ударит молния. Также нужно на время избавиться от изделий из металла, так как он притягивает электрические разряды.

В самом низком месте нужно присесть, прижать голову к коленям.

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

Видео

Если имеется машина, то вполне безопасно будет переждать грозу именно в ней.

В 80-х гг. прошлого века совершенно случайно обнаружили другие виды молний, которые с поверхности земли не увидишь, так как они происходят на высоте 50-125 км. При этом они могут быть даже красными!
Одна из таких молний — спрайт. “Живет” спрайт не более 100 миллисекунд. Внешне представляет собой свечение более 60 км. в диаметре.

Фото спрайта:

Есть еще джеты — большие конусы, которые также бьют не в землю, а вверх. Их длина может достигать более 65 км. Их цвет — ярко-синий.

Самый высокий вид молнии (известный сейчас науке), называется эльф.

Он виден в верхних частях мезосферы.

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

Спрайты для дизайна вашего сайта!


Приветствую вас дорогие друзья! Сегодня я поделюсь с вами небольшой коллекцией элементов для веб дизайна.

Элементами веб дизайна, представленными в этом небольшое наборе, являются спрайты. Спрайты (css спрайты), проще говоря, – это одна картинка, которая разбита на несколько, так скажем, сегментов – каждый сегмент – это отдельная картинка..

Давайте лучше приведу пример спрайта и все сразу станем понятно, вот пример:

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

Чтобы совсем стало понятно, давайте рассмотрим применение спрайтов.

Зачем нужны спрайты и как ими пользоваться?

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

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

Это делает с помощью css правил.

Итак, у нас имеется спрайт картинка:

Её размеры: 90 на 174 пикселя, верхняя половина – это 90 на 87 пикселей.

Давайте рассмотрим код:

<style type="text/css"> #primer{ width: 90px; height: 87px; background:url("http://sergey-oganesyan.ru/wp-content/uploads/2014/02/sprite.jpg"); cursor: pointer; } #primer:hover{ background-position:0 87px; } </style> <div id="primer"></div>

При наведении мыши, мы просто меняет позицию фона и благодаря этому создается интересный эффект без использования языка javascript.

А вот пример вышеизложенного кода в действии:

То есть при наведении мы показываем другую часть картинки.

Теперь, я думаю, у вас не возникнет вопросов как и где применять такие элементы дизайна на своем сайте.

Вот небольшая коллекция css спрайтов, собранная на просторах интернета.


Скачать набор

На этом все, до новых публикаций, удачи!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

CSS спрайты. 10+ генераторов

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.

Gotchas

There are a couple of really annoying browser bugs to watch out for when creating CSS sprites.

Opera

Opera (at least as far as version 9.0) won’t recognise a background position greater than 2042px or smaller than -2042px using that boundary value instead. The tool takes care of this by creating new columns within the image output each time the vertical limit is reached.

Safari

Safari has a problem with repeating background images. Fortuantely this can be easily solved by specifying a large enough horizontal offset value (configurable).

Further Reading

A List Apart published an article entitled CSS Sprites: Image Slicing’s Kiss of Death which explains the concepts behind CSS sprites. If you’re new to this technique we’d strongly suggest heading over to A List Apart and taking a look.

Добавить комментарий

Закрыть меню