email: [email protected]
skype: utz0r2
github: utz0r2
Разделы: CSS, HTML, PHP, JS, Видео, Заметки
vvStore | vvShop
© 2008 – 2019
» » » Страница 8

HTML5 Placeholder Attribute

HTML5 Placeholder Attribute

Ранее я уже писал о плейсхолдерах. Нормальные браузеры поддерживают
<input type='text' name='email' placeholder='Email Address'/>
. Вот костыль на jquery который решает проблему для недобраузеров:
<script>
    // placeholder polyfill
    $(document).ready(function(){
        function add() {
            if($(this).val() == ''){
                $(this).val($(this).attr('placeholder')).addClass('placeholder');
            }
        }

        function remove() {
            if($(this).val() == $(this).attr('placeholder')){
                $(this).val('').removeClass('placeholder');
            }
        }

        // Create a dummy element for feature detection
        if (!('placeholder' in $('<input>')[0])) {

            // Select the elements that have a placeholder attribute
            $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);

        // Remove the placeholder text before the form is submitted
            $('form').submit(function(){
                $(this).find('input[placeholder], textarea[placeholder]').each(remove);
            });
        }
    });
</script>

А стили на них вешаются так:
::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }

Хлебные крошки верстка

Хлебные крошки верстка

Смотреть

CSS3 Modal Popups

CSS3 Modal Popups

ДЕМО / СКАЧАТЬ

Панель изображений(слайдер) на CSS3

Панель изображений(слайдер) на CSS3

ДЕМО / СКАЧАТЬ

Стикеры CSS3

Стикеры CSS3

СМОТРЕТЬ

Кнопки как на youtube

Кнопки как на youtube

ДЕМО

HTML
<button class="button" role="button">
   Button #1
</button>


CSS
.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}
«»
Вверх