Автор

Необычная 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.

 

Вот и всё

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Порой для при манипуляции каких-нибудь действий на сайте требуется вывод сообщений различного рода, например о возникшей ошибке, или удачном выполнении определенного действия пользователем. Данные информационные сообщения отыгрывают весомую роль в деятельности посетителя, так как несут информационную роль когда пользователь выполняет важную информацию. В данном уроке мы рассмотрим как создать сообщения для пользователя с использованием CSS3 и jQuery. Идея заключается в том, что при выполнении определенного действия..


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

Таблица цен, которая анимируется в форме покупки, когда пользователь выбирает нужную услугу.


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

Ранее в своём блоге, в статье «Невероятная наглость» я уже описывал ситуацию когда у меня спёрли весь контент с моего сайта и тогда всё решилось силами хостинга на котором распологался сайт клон! Сейчас всё обстоит совершенно иначе.


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

Представляю вашему вниманию два генератор градиента на CSS. С помощью онлайн градиент генераторов css Вы сможете создать фон (background) для вашего сайта блога или проекта. Сервисы просты в управлении и имеет интуитивно понятный интерфейс и гибкие настройки которые максимально позволяют получить тот результат который вам необходим.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close