Считаешь ты знаешь CSS ?

monya1987 · December 22, 2011

Привет сторожилам, думаю название поста задело самолюбие и затащило вас сюда ...

Не реальное задание привело меня сюда спустя несколько лет =)

Знатоки итак внимание вопросы:

1) - Какое свойство отвечает за то чтобы <h1> начало себя вести именно так как показано в видео ? (ответ нашел спустя час примерно)

2) - Как у кого то вышло сделать такое с текстом что на видео ? (ищу до сих пор) это 100% на css сделано.

3) - все что связанно с Section это уже js =)) С ним тоже было интересно попрактиковаться ... (bookmarkable tabs) на чистом JS.

rash · December 22, 2011

1. знаю ответ

2. Media queries?

3. можно без js %)

SelenIT · December 22, 2011

С первым просто, со вторым — согласен с rash, с третьим тоже просто.

Имхо, сильнее удивляют "открытия" в старом добром CSS 2.1 (например, сколько разных фоновых картинок можно применить для одного элемента?).

Softlink · December 22, 2011

Третье можно и на :focus сделать. Первое и второе свойство еще не приходилось применять, только читал о нем. Их я сразу не вспомнил

hedgehog · December 22, 2011

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

Третье можно и на :focus сделать.

Ээ, а как? На видео видно (извините за каламбур), что он использует навигацию вперед-назад. Разве с :focus так сделаешь?

rash · December 22, 2011

Имхо, сильнее удивляют "открытия" в старом добром CSS 2.1 (например, сколько разных фоновых картинок можно применить для одного элемента?).

Гм, а вот это правда уже интереснее

Как-то никогда не сомневался, что в рамках css 2.1 - только одну.

SelenIT · December 22, 2011

Чисто к элементу и правда одну, но с псевдоэлементами — уже минимум 5

Softlink · December 22, 2011

Ээ, а как? На видео видно (извините за каламбур), что он использует навигацию вперед-назад. Разве с :focus так сделаешь?

Пардон, точно. Я смотрел как пункты меняются, а на навигацию и не обратил внимания. Тогда target, да.

Чисто к элементу и правда одну, но с псевдоэлементами — уже минимум 5

Прикольно) По-моему, ты уже где-то показывал сей прием.

monya1987 · December 22, 2011

rash ты the best of the best of the best =))

1) - text-overflow:ellipsis

2) - @media screen and (max-width: 400px) {p {color:#ccc;max-height:80px;overflow:hidden;}}

3) -

<script type="text/javascript">
        function OnHashChange (event) {
            conts = new Array ("sectionOne","sectionTwo","sectionThree");
            hash = document.location.hash;
            for(i=0;i<conts.length;i++) {
              my = "#" + conts[i]
              if (hash == my) {
                document.getElementById(conts[i]).className = 'active'
                } else {
                  document.getElementById(conts[i]).className = 'box'
                  }
			}
        }
    </script>
<body onhashchange="OnHashChange (event);">

p/s себя я успокоил тем что для мобильных устройств давненько не верстал =)

С первым просто, со вторым — согласен с rash, с третьим тоже просто.
Имхо, сильнее удивляют "открытия" в старом добром CSS 2.1 (например, сколько разных фоновых картинок можно применить для одного элемента?).

Только метод этот с ие6 не дружит.

а от сего использовать его мало кто решался ... =)

а вообще конечно и во 2м цсс можно было создать блок с закругленными углами из 2х тегов... =)

rash а ты уверен что табы можно без js сделать ?

возможно ты не заметил что в конце видео по нажатию back все тоже работает ...

Если возможно укажи куда капать =)

rash · December 22, 2011

rash а ты уверен что табы можно без js сделать ?
возможно ты не заметил что в конце видео по нажатию back все тоже работает ...
Если возможно укажи куда капать =)

Да, уверен.

Делается это с помощью :target (SelenIT уже указал ссылку на описание), и во всяком случае в вебкитах при этом навигация работает нормально. В остальных не проверял даже, демонстрировали-то в хроме

SelenIT · December 22, 2011

В FF9 и Опере 11.6 — работает. В IE9, к сожалению, по Back не переходит (плюс, изловчившись, после клика по Back можно открыть 2 вкладки одновременно — явный баг).

вообще конечно и во 2м цсс можно было создать блок с закругленными углами из 2х тегов... =)

Можно и из одного + экспрешны для старых IE. И еще один фончик добавить через :first-letter. А конкретно в IE (5+) круглые углы можно и вообще без CSS сделать

Кстати, забавно, что text-overflow:ellipsis в IE6 тоже работает... такие вот у W3C теперь инновации

Nanto · December 23, 2011

Не понял про :target...

Это якобы через css можно реализовать навигацию?

hedgehog · December 23, 2011

Не понял про :target...
Это якобы через css можно реализовать навигацию?

при переходе по "якорям" в адресной строке добавляется #имя_якоря , поэтому кнопки вперед-назад работают в этом случае

rash · December 23, 2011

А конкретно в IE (5+) круглые углы можно и вообще без CSS сделать

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

А как?

SelenIT · December 23, 2011

Никаких сенсаций, всё по старинке... хотя на этом фоне позиционирование интеграции с SVG при text/html как мегафичи HTML5 тоже несколько умиляет .

Sign In

Считаешь ты знаешь CSS ?

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information