Блокнот — @дневники: асоциальная сеть

пятница, 22 августа 2014

10:17

Лэндинг пейдж - Разбор

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Оптимизация конверсии: беспощадная критика 10 лендингов
http://habrahabr.ru/company/witget/blog/234183/

Хорошие и плохие лендинги: как создать страницу, которая действительно повысит конверсию. Часть 1
http://witget.com/blog/xoroshie-i-ploxie-lendingi-kak-sozdat-stranicu-kotoraya-dejstvitelno-povysit-konversiyu-chast-1/?utm_source=habr&utm_medium=article&utm_campaign=22-08

Хорошие и плохие лендинги: как создать страницу, которая действительно повысит конверсию. Часть 2
http://witget.com/blog/xoroshie-i-ploxie-lendingi-kak-sozdat-stranicu-kotoraya-dejstvitelno-povysit-konversiyu-chast-2/?utm_source=habr&utm_medium=article&utm_campaign=22-08

@темы: Habrahabr, Landing Page, Лэндинги, Ссылки

URL

10:02

Jade - Node Template Engine

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Jade

http://jade-lang.com/

http://jade-lang.com/tutorial/

@темы: HTML, Верстка, CSS, Jade, Ссылки

URL

четверг, 21 августа 2014

11:47

RECESS — преобразование CSS и LESS

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

RECESS — преобразование CSS и LESS

http://twitter.github.io/recess/

Установка

$ npm install recess -g

Use Recess to compile a LESS file to CSS

https://snipt.net/willrichards/use-recess-to-compile-a-less-file-to-css/

Со сжатием

recess C:\Winginx\home\test19\public_html\css\style.less --compress --compile > C:\Winginx\home\test19\public_html\css\style.css

Без сжатия

recess C:\Winginx\home\test19\public_html\css\style.less --compile > C:\Winginx\home\test19\public_html\css\style.css

recess C:\Winginx\home\site30\public_html\Content\css\style.less --compile > C:\Winginx\home\site30\public_html\Content\css\style.css

@темы: Верстка, LESS, CSS, RECESS, Ссылки

URL

10:41

Руководство по написанию кода на HTML и CSS

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

https://csssr.github.io/code-guide/

@темы: HTML, Верстка, CSS

URL

среда, 20 августа 2014

13:40

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Заказ обратного звонка

$('#order_callback_form, #callback_submit').on('submit', function (e) {
        e.preventDefault();
        var self = $(e.target);
        var submit = $('#callback_submit');
        var wrapper2 = $('.submit-button-wrapper-2');
        var loader = $('.ajax-loader', self);
        var phone = $('#callbackPhone').val();
        var check = $('#callbackCheck').val();
        var valid = true;

        if (phone.length === 0) {
            $('#callback_no_phone').removeClass('is-hidden');
            valid = false;
        } else {
            $('#callback_no_phone').addClass('is-hidden');
        }

        if (check.length !== 0) {
            valid = false;
            $('.modalmsg, #semitransparentoverlay').fadeOut('200');
        }

        if (valid) {
            wrapper2.addClass('is-hidden');
            loader.removeClass('is-hidden');
            $.getJSON(
                '/callback.php',
            self.serialize(),

            function (data) {
                wrapper2.removeClass('is-hidden');
                loader.addClass('is-hidden');
                $('#callback_response_message').text(data.message);
                $('#order_callback_form, .title-7').addClass('is-hidden');
                $('#callback_response').removeClass('is-hidden');
            });
        }
    });

    $('#order-callback .closebtn').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('#order-callback, #semitransparentoverlay').fadeOut('200', function () {
            $('#callbackPhone').val('');
            $('#order_callback_form, .title-7').removeClass('is-hidden');
            $('#callback_response').addClass('is-hidden');
        });
    });

Форма обратной связи

$('#contacts_form, #contacts_submit').on('submit', function (e) {
        e.preventDefault();
        var self = $(e.target);
        var submit = $('#contacts_submit');
        var wrapper = $('.submit-button-wrapper');
        var loader = $('.ajax-loader', self);
        var name = $('#contactName').val();
        var email = $('#contactEmail').val();
        var captcha = $('#contactCode').val();
        var message = $('#contactMessage').val();

        var valid = true;
        if (name.length === 0) {
            $('#contacts_no_name').removeClass('is-hidden');
            valid = false;
        } else {
            $('#contacts_no_name').addClass('is-hidden');
        }

        if (email.length === 0) {
            $('#contacts_no_email').removeClass('is-hidden');
            valid = false;
        } else {
            $('#contacts_no_email').addClass('is-hidden');

            var regexEmail = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$");
            if (!regexEmail.test(email)) {
                $('#contacts_wrong_email').removeClass('is-hidden');
                valid = false;
            } else {
                $('#contacts_wrong_email').addClass('is-hidden');
            }
        }

        if (captcha.length === 0) {
            $('#contacts_no_captcha').removeClass('is-hidden');
            valid = false;
        } else {
            $('#contacts_no_captcha').addClass('is-hidden');
        }

        if (message.length === 0) {
            $('#contacts_no_message').removeClass('is-hidden');
            valid = false;
        } else {
            $('#contacts_no_message').addClass('is-hidden');
        }

        if (valid) {
            wrapper.addClass('is-hidden');
            loader.removeClass('is-hidden');
            $.getJSON(
                '/contacts.php',
            self.serialize(),

            function (data) {
                wrapper.removeClass('is-hidden');
                loader.addClass('is-hidden');
                $('#semitransparentoverlay').redraw();
                $('#message .message-text').text(data.message);
                $('#message, #semitransparentoverlay').fadeIn('200');

                if (data.request === 'ok') {
                    var name = $('#contactName').val('');
                    var email = $('#contactEmail').val('');
                    var captcha = $('#contactCode').val('');
                    var message = $('#contactMessage').val('');
                }
            });
        }
    });

@темы: jQuery, Заказ обратного звонка, Форма обратной связи

URL

понедельник, 18 августа 2014

10:45

Как узнать API_ID вконтакте. Устанавливаем кнопку “Мне нравится” В Контакте на сайт.

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://butamuhbi4.ru/internet-po-kasatelnoi/kak-uznat-api_id-vkontakte-ustanavlivaem-knopku-mne-nravitsya-v-kontakte-na-sajt/

@темы: VK, Ссылки

URL

суббота, 09 августа 2014

14:19

Знак рубля для HTML

все записи пользователя в сообществе netcat-na-diary

Знак рубля для HTML

http://jdevelop.info/articles/html-css-js/371-znak-rublya-dlya-html

@темы: HTML, Верстка, CSS, Fonts, Знак рубля для HTML, Шрифты, Ссылки

URL

14:17

Centering a div block without the width

все записи пользователя в сообществе netcat-na-diary

Центрирование блока без фиксированной ширины

HTML

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width

@темы: HTML, Верстка, CSS, Центрирование блока без фиксированной ширины, Ссылки

URL

вторник, 29 июля 2014

18:15

Обои и исходники

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://subtlepatterns.com/

@темы: Верстка, Photoshop, Обои и исходники, Ссылки

URL

среда, 02 июля 2014

22:39

Доступ к записи ограничен

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Закрытая запись, не предназначенная для публичного просмотра

URL

понедельник, 02 июня 2014

15:31

skrollr

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

skrollr

https://github.com/Prinzhorn/skrollr

@темы: skrollr, Ссылки

URL

пятница, 30 мая 2014

10:14

Semantic UI

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Фреймворк Semantic UI

http://semantic-ui.com/

@темы: Верстка, Semantic UI, Framework, Ссылки

URL

вторник, 27 мая 2014

12:48

Блог по программированию

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://copist.ru/

@темы: HTML, Верстка, jQuery, Учебники, CSS3, Ссылки

URL

понедельник, 26 мая 2014

11:24

Making HTML dropdowns

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Making HTML dropdowns

http://red-team-design.com/making-html-dropdowns-not-suck/

@темы: select, Верстка, dropdowns, CSS3, Ссылки

URL

10:30

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

/*if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
			var viewportmeta = document.querySelector('meta[name="viewport"]');
			window.addEventListener('resize', function(event){
			  if (window.innerWidth <= 1280) {
				viewportmeta.content = 'initial-scale=0.6';
			  }
			  if(window.innerWidth > 1280 && window.innerWidth <= 1707) {
				viewportmeta.content = 'initial-scale=0.7';
			  }
			});
			
			$(window).on("orientationchange",function(event){
			  alert("Orientation is: " + event.orientation);
			});
		}*/
		
		/*if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {			  
		  window.onorientationchange = detectIPadOrientation;
		  function detectIPadOrientation () {
			var viewportmeta = document.querySelector('meta[name="viewport"]');
			
			if ( orientation == 0 ) {
			 viewportmeta.content = 'initial-scale=0.6';
			}
			else if ( orientation == 90 ) {
			 viewportmeta.content = 'initial-scale=0.8';
			}
			else if ( orientation == -90 ) {
			 viewportmeta.content = 'initial-scale=0.8';
			}
			else if ( orientation == 180 ) {
			 viewportmeta.content = 'initial-scale=0.6';
			}
		  }
		}*/

URL

среда, 21 мая 2014

11:02

Иконки

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Иконки

https://www.iconfinder.com/

@темы: Верстка, Icons, Иконки, Ссылки

URL

вторник, 20 мая 2014

09:41

LESS Mixin для Long text-shadow

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

LESS Mixin для Long text-shadow

http://stackoverflow.com/questions/23738798/converting-long-shadow-sass-mixin-to-less/

Код и использование
http://codepen.io/seven-phases-max/pen/Bkdgp

/* Long text shadow */
/* ............................................................*/
/* .for */

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

/* ............................................................ */
/* .for-each */

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i)                  {.-each(extract(@array, @i))}


.long-shadow(@type, @color, @length, @fadecolor: @color, @scew: false, @direction: right) {
    .-() {
        @dir:  1px;
        @offset: 0;
        @s: .5px * @i;
    }
    .-() when (@direction = left) {@dir: -1px}
    .-() when (@type = box)       {@offset: 1}
    .-() when (@scew = false)     {@s: ;}
    .-() when (@type = text)      {@s: ;}

    .for(0, @length - 1); .-each(@i) {
        .-();
        @x: -@dir * (@i + @offset);
        @y: 1px  * (@i + @offset);
        @a: 1 - @i / @length;
        @c: mix(@color, @fadecolor, 100% * sqrt(@a));
        @{type}-shadow+: @x @y 0 @s @c;
    }
}


.shape-1 {
    .long-shadow(text, darken(@green, 7%), 200); 
}

.shape-2 {
    .long-shadow(text, darken(@blue, 7%), 200); 
}

@темы: Верстка, LESS, CSS, Mixin, Ссылки

URL