Me: января 2015

вторник, 20 января 2015 г.

Подтверждение адреса

Пришел долгожданный конверт от гугл. Счастье!

воскресенье, 18 января 2015 г.

PHP inside HTML

Дабы второй раз не попасть так же и не потратить уйму времени на то чтобы найти
"Почему не работает!!!"

PHP скрипты не будут отрабатываться в HTML документа. По умолчанию интерпретатором PHP обрабатываются два типа файлов

*.php
*.phtml

Любые вставки со скриптами PHP комментируются автоматически.

Выглядеть это будет так:

Другими словами, чтобы PHP скрипт работал внутри сайта, необходим изменить расширение документа .html на .php. Я использую PHP скрипт для отправки данных из формы заявки на почту. Переделывать документ в PHP желания нет. Поэтому нашел другой способ.Указать интерпретатору, чтобы он обрабатывал так же документы HTML.
Делается это следующим образом:
В корне сайта создаётся файл .htaccess
В него добавляется строка

AddType application/x-httpd-php .ext1 .php3 .html

После этого все рабоает

Ободка текста CSS

Чтобы сделать обводку, нужно сделать тени для текста со всех сторон.

text-shadow: 1px 1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
-1px -1px 0 black;

Получается вот так:

среда, 7 января 2015 г.

Umit Can Turker's blog

Блог нашего преподавателя Umit Can Turker.
Собраны интересные и полезные статьи.
http://umitcanturker.com/

Верстка под различные размеры экранов

Инструменты для создания адаптивного дизайна. Теги @media и @import позволяют использовать отдельные менять параметры CSS для элемента в зависимости от размера экрана. Чтоб было возможно создать сайт, который будет адаптироваться под размеры экрана - от мобильного устройства до большого экрана.

@media all and (min-width:500px) { … }

Вместо точек вносятся селекторы CSS, которые специально изменены под размер такого экрана.

Более подробнее можно узнать здесь.

Простое меню на CSS

Меню в кортом при наведении на один из пунктов он подчеркивается снизу, а другие элементы меню становятся размытыми.

HTML:

<nav>
<a href="#program-link">ЦЕЛЬ</a>
<a href="#skills-link">РЕЗУЛЬТАТ</a>
<a href="#technics-link">ТЕХНИКИ</a>
<a href="#stages-link">ЭТАПЫ</a>
</nav>

CSS:

nav
{
/*left: 364px;*/
/*position: absolute;*/
float: right
}
nav {
/*background: none repeat scroll 0 0 #202033;*/
/* box-shadow: 0 3px 5px #555555;*/
position: relative;
text-align: center;
}
nav:hover a {
color: transparent;
text-shadow: 0 0 3px #666666;
}
nav a {
color: #B6B2B2;
display: inline-block;
font-family: tahoma;
font-size: 1.87em;
height: 54px;
line-height: 56px;
text-decoration: none;
transition: all 0.3s ease 0s;
width: 132px;
font-family: 'ubuntu condensed';
}
nav a:hover {
border-bottom: 5px solid #91C9C0;
color: #91C9C0;
text-shadow: none;
}
@media screen and (max-width: 620px) {
nav a {
width: 49%;
}
}
@media screen and (max-width: 300px) {
nav a {
width: 100%;
}
}

Parallax scrolling using stellar.js

Скрипт для создания плавающего паралакс скролинга.
Паралаксом называется независимо движущийся фон на сайте.
Создал его Mark Dalgleish
Хороший пример, как это выглядит есть на его сайте
Скрипт подключается в тег <head>

<script src="../js/stellar.js"></script>

Чтоб фон двигался необходимо в нужный нам блок div поставить параметры для скрипта

<div class="photo summer" data-stellar-background-ratio="0.5" style="background-position: 50% 0px;">

data-stellar-background-ratio - это параметра скорости с которой перемещается фон блоки.

Так же через style настраивается начальное положение блока - стартовая точка его перемещения.

Route to Group Office in Istanbul

Путь от гостиницы до офиса в Стамбуле.

Страницы

вторник, 20 января 2015 г.

воскресенье, 18 января 2015 г.

среда, 7 января 2015 г.

вторник, 20 января 2015 г.

воскресенье, 18 января 2015 г.

среда, 7 января 2015 г.