Особенности и нововведения CSS3. Примеры.

Тема в разделе 'CSS 3', создана пользователем Admin, 2 май 2011.

  1. Admin Админ

    1. Круглые (скругленные) углы

    [IMG]

    Классический метод:
    Код:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.corners.js"></script>
    <script type="text/javascript">
    $(function(){
        $('.box').corners('10px');
    });
    </script>
    <div class="box">
        <!--CONTENT-->
    </div>
    Классический метод использует JQuery, наряду с JavaScript плагином "***Для просмотра ссылок необходимо войти или зарегистрироваться***"

    С помощью CSS3:
    Код:
    <style type="text/css">
    .box {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
    </style>
    
    <div class="box">
        <!--CONTENT-->
    </div>
    Как видно, добавили всего 3 CSS3 свойства и все. И то, только из-за того, что разные браузеры понимают их по разному.

    2. Тени объектов


    [IMG]


    Классический метод:
    Код:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.dropShadow.js"></script>
    <script type="text/javascript">
    $(function(){
        $('.box').dropShadow({
            left: 5,
            top: 5,
            opacity: 1.0,
            color: 'black'
        });
    });
    </script>
    
    <div class="box">
        <!--CONTENT-->
    </div>
    Используется ***Для просмотра ссылок необходимо войти или зарегистрироваться*** плагин

    С помощью CSS3:
    Код:
    <style type="text/css">
    .box {
    box-shadow: 5px 5px 2px black;
    -moz-box-shadow: 5px 5px 2px black;
    -webkit-box-shadow: 5px 5px 2px black;
    }
    </style>
    
    <div class="box">
        <!--CONTENT-->
    </div>
    Снова использованы всего 3 свойства нового CSS

    3. Тень текста



    [IMG]


    Классический метод:
    Код:
    <style type="text/css">
    .font {
    font-size: 20px;
    color: #2178d9;
    }
    .fonts {
    position: relative;
    }
    .fonts .font {
    position: absolute;
    z-index: 200;
    }
    .fonts .second {
    top: 1px;
    color: #000;
    z-index: 100;
    }
    </style>
    
    <div class="fonts">
        <span class="font">The quick brown fox jumps over the lazy dog.</span>
        <span class="font second">The quick brown fox jumps over the lazy dog.</span>
    </div>
    Здесь использованы некоторые трюки CSS. Абсолютное положении одной копии текста за другой.

    С помощью CSS3:
    Код:
    <style type="text/css">
    .font {
    font-size: 20px;
    color: #2178d9;
    }
    .font {
    text-shadow: 0 1px 0 #000;
    }
    </style>
    
    <span class="font">The quick brown fox jumps over the lazy dog.</span>
    Использовано свойство CSS - text-shadow


    Продолжение следует...
    По всем вопросам, пишем в этой теме.

Поделиться этой страницей