Как реализовать появление и другие эффекты с помощью CSS - PullRequest
Новая
       2

Как реализовать появление и другие эффекты с помощью CSS

0 голосов
/ 21 ноября 2011

Взять, к примеру, этот код .

Итак, вместо тега <a> я хочу использовать пустой div, потому что использование text-indent:-9999px не подходит для SEO.

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

Также возможно ли добавить плавный эффект затухания при наведении только с помощью CSS?

Ответы [ 3 ]

2 голосов
/ 21 ноября 2011

Я не думаю, что использование текстового отступа отрицательно влияет на SEO, если вы все равно не носите черную шляпу.http://www.google.com/support/webmasters/bin/answer.py?answer=66353

1 голос
/ 21 ноября 2011

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

В противном случае есть свойство CSS3 transition-property, которое можно использовать http://www.w3.org/TR/css3-transitions/.

EDIT

Если я правильно понимаю первый вопрос, добиться эффекта на примере, который вы привели исключительно в CSS, сложно, по крайней мере, на данный момент.Вам лучше использовать библиотеку js, такую ​​как jQuery, для таких эффектов, как bounce и fade-ins.

0 голосов
/ 22 ноября 2011

Вместо text-indent вы также можете использовать padding.

. По сути, установите либо высоту, либо ширину (но только one !) Элемента на ноль и используйтеpadding-top или padding-left для достижения желаемых размеров.Обратите внимание, что overflow: hidden необходимо, чтобы вытолкнуть все содержимое из поля зрения и создать эффект "невидимки".

Пример: http://jsfiddle.net/N8qah/16/

Пример с переходами: 10101 *http://jsfiddle.net/N8qah/18/

Другой альтернативой является установка line-height для скрытого текста, который по крайней мере вдвое превышает высоту элемента.Но если у вас есть вложенный элемент с текстом, как здесь, вам нужно будет сбросить line-height в этом вложенном элементе.Пример этого: http://jsfiddle.net/N8qah/19/

...