Автор

Необычная Captcha на html5, CSS3, JS

Необычная Captcha на html5, CSS3, JS


Предлагаю Вам очень, на мой взгляд, интересный вариант Captcha. Но как готовый модуль его использовать можно только в том случае, если страница с формой  не перезагружается. Да и вообще это больше идея с которой еще надо поковыряться чтобы применить для Captcha. Хотя человеку со знанием JavaScript это будет делом 5-10 минут!

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

ДЕМО
ИСХОДНИКИ

 

Исходный файл для скачивания - без стилевых изменений, а на демонстрационной странице я немного всё поменял на свой взгляд и вкус и привожу Вам свой пример:

 

HTML

Начнем с подключения стиля и скриптов:

<script src="js/hexaflip.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<link href="css/hexaflip.css" rel="stylesheet" type="text/css">

В нужное место вставляем вывод самиого содержимого:

<center>
    <header class="clearfix">
        <h2>Разложите правильно цвета ( <span style="color:#E74C3C;">red</span> <span style="color:#F7C221;">yellow</span> <span style="color:#3498DB;">blue</span> <span style="color:#93c943;">green</span> ), если вы не бот</h2>
    </header>
</center>
<div class="main">
     <div id="hexaflip-dem" class="demo"></div>
        <div>
            <botton id="submit">Проверить</botton>
            <div id="output"></div>
        </div>
</div>

 

JS

В нижней части страницы перед закрытием тега </body> вставляем сам обработчик:

    var hexadem,
            set = [
                {
                    value: 'orange',
                    style: {
                        backgroundColor: '#e67e22' 
                    }
                },
                {
                    value: 'teal',
                    style: {
                        backgroundColor: '#1ABC9C'
                    }
                },
                {
                    value: 'yellow',
                    style: {
                        backgroundColor: '#F7C221'
                    }
                },
                {
                    value: 'green',
                    style: {
                        backgroundColor: '#93c943'
                    }
                },
                {
                    value: 'blue',
                    style: {
                        backgroundColor: '#3498DB'
                    }
                },
                {
                    value: 'red',
                    style: {
                        backgroundColor: '#E74C3C'
                    }
                },
                {
                    value: 'violet',
                    style: {
                        backgroundColor: '#9B59B6'
                    }
                },
                {
                    value: 'gray',
                    style: {
                        backgroundColor: '#BDC3C7'
                    }
                }
            ];
    document.addEventListener('DOMContentLoaded', function(){

        var submit = document.getElementById('submit'),
                output = document.getElementById('output');

        hexadem = new HexaFlip(document.getElementById('hexaflip-dem'),
                {set1: set, set2: set, set3: set, set4: set},
                {size: 120,fontSize: 32, margin: 8, perspective: 1000}
        );
        submit.addEventListener('click', function(){
            if(hexadem.getValue().join(' ') === 'red yellow blue green'){
                output.innerHTML = 'Цвета угаданы! Ты просто умница!';

                setTimeout(function(){
                    $(".hexaflip-cube-set1").css('transform','translateZ(2000px)');
                },100);
                setTimeout(function(){
                    $(".hexaflip-cube-set2").css('transform','translateZ(2000px)');
                },400);
                setTimeout(function(){
                    $(".hexaflip-cube-set3").css('transform','translateZ(2000px)');
                },700);
                setTimeout(function(){
                    $(".hexaflip-cube-set4").css('transform','translateZ(2000px)');
                },1000);

            }else{
                output.innerHTML = 'Нифига, крути лучше :)';
            }
        }, false);
    }, false);

Для настройки размеров кубиков Вам нужна строка {size: 120,fontSize: 32, margin: 8, perspective: 1000} это размер кубика size: 120, размер текста на кубике fontSize: 32.

 

Вот и всё

Пользуйтесь, применяйте и я буду рад если этот пример поможет Вам для осуществления своих идей!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Необычная Captcha на html5, CSS3, JS

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


Необычная Captcha на html5, CSS3, JS

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


Необычная Captcha на html5, CSS3, JS

Предлагаю вам, на мой взгляд, стильные и креативные SVG иконки с длинными тенями (46 шт.). Это коллекция иконок, распространяемых под лицензионным соглашением Creative Commons Attribution, а это значит, что вы можете использовать их бесплатно как в личных, так и в коммерческих проектах.


Необычная Captcha на html5, CSS3, JS

Как высказался руководитель компании UMIHOST в своем блоге Антон Приходько – Все студии и фрилансеры, занимающиеся изготовлением сайтов, где-то эти сайты в итоге размещают. Редко клиент сам заботится о хостинге своего сайта, а тем более, занимается собственно размещением сайта — чаще всего сайт живет там, куда его «поселил» изготовитель.

Выбирая место размещения для сайтов своих клиентов, любой приличный вебмастер обычно держит в голове два вопроса:

  1. Как выбрать место размещения сайта таким образом, чтобы не опростоволоситься в глазах заказчика? Чем стабильнее будет работать сайт, тем больше доверия к изготовителю: и карма от этого улучшается, и доверие в итоге окупается.
  2. Как выбрать место для размещения сайта таким образом, чтобы сайт не только стабильно работал, но еще и приносил своему создателю выгоду?

105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close