Результати пошуку за запитом: видеокурс c*
Властивості CSS3 для перетворення
Автор: Олександр Марченко
Введение
Чем больше браузеров начинает поддерживать CSS3, тем больше веб-разработчиков начинает использовать некоторые интересные возможности данной технологии. А именно, совмещая работу CSS3 в связке с HTML5 и JavaScript, реализовывать разного рода графические эффекты. В итоге и появилось сленговое название для этих подходов - «Flash-killer».
В серии статей рассмотрим основные дополнения к CSS3, познакомимся с простейшими 2D и 3D преобразованиями.
Свойства CSS3 – Transform являются, пожалуй, наиболее популярными преобразованиями, которые позволяют применять векторные изменения к HTML элементам, расположенным на странице. Вы сможете контролировать наклон, масштабирование и поворот любого элемента на web-странице. Стоит отметить, что подобные эффекты предпочтительно применять исключительно к изображениям и другим графическим элементам, которые не содержат текстовой информации, поскольку искажение текста существенно снижает его читаемость. Итак, познакомимся с основными функциями свойства transform:
1. Skew отвечает за наклон элемента, может принимать два параметра. Первый отвечает за ось X, другой за ось Y, иначе говоря, наклоны по горизонтали или вертикали.
<head>
<title>title>
<style>
div {
width: 400px;
height: 200px;
background-color: crimson;
margin:100px;
font-size:50px;
color: white;
}
#skew1 {
transform: skew(30deg);
}
#skew2 {
transform: skew(-30deg);
}
#skew3 {
transform: skew(10deg, 10deg);
}
#skew4 {
transform: skewX(10deg);
transform: skewY(-10deg);
}
style>
head>
<body>
<div id="clear">Example Textdiv>
<div id="skew1">Example Text 1div>
<div id="skew2">Example Text 2div>
<div id="skew3">Example Text 3div>
<div id="skew4">Example Text 4div>
body>
2. Scale отвечает за масштабирование элемента по горизонтали и вертикали. Также используется и в частных случаях как ScaleX и ScaleY.
<head>
<title>title>
<style>
div {
width: 400px;
height: 200px;
background-color: ActiveCaption;
margin: 150px;
font-size: 50px;
color: white;
transform: scale(1)
}
#scale {
transform: scale(1.5);
}
#scaleX {
transform: scaleX(1.5);
}
#scaleY {
transform: scaleY(1.7);
}
style>
head>
<body>
<div id="clear">Example Textdiv>
<div id="scale">Example Text 1div>
<div id="scaleX">Example Text 2div>
<div id="scaleY">Example Text 3div>
body>
3. Rotate задает поворот элемента относительно точки трансформации, которая в свою очередь задается свойством transform-origin. В простейшем использовании обеспечивает поворот элемента за или против часовой стрелки относительно центра.
<head>
<title>title>
<style>
div {
width: 400px;
height: 200px;
background-color: chocolate;
margin:100px;
font-size:50px;
color: white;
}
#rotateL {
transform: rotate(-10deg);
}
#rotateR {
transform: rotate(10deg);
}
style>
head>
<body>
<div id="clear">Example Textdiv>
<div id="rotateL">Example Text 1div>
<div id="rotateR">Example Text 2div>
body>
4. Translate обеспечивает сдвиг элемента на определенное значение по горизонтали и вертикали. TranslateX отвечает за смещение по горизонтали, принимая положительное значение, сдвигает вправо, а принимая отрицательное значение, сдвигает влево. TranslateY действует аналогично по вертикальной направленности. Положительное принятое значение сдвигает элемент вниз, а отрицательное - вверх.
<head>
<title>title>
<style>
div {
width: 400px;
height: 200px;
background-color: crimson;
margin:100px;
font-size:50px;
color: white;
}
#translateL {
transform: translateX(-30px);
}
#translateR {
transform: translateX(30px);
}
#translateU {
transform: translateY(-20px);
}
#translateD {
transform: translateY(20px);
}
style>
head>
<body>
<div id="clear">Example Textdiv>
<div id="translateL">Example Text 1div>
<div id="translateR">Example Text 2div>
<div id="translateU">Example Text 3div>
<div id="translateD">Example Text 4div>
body>
Гораздо эффектней подобные трансформации выглядят, когда выполняются при наведении курсора мыши на элемент. В этом же примере вы сможете увидеть, что можно использовать сразу несколько преобразований для вашего элемента на странице.
<head>
<title>title>
<style>
#example {
width: 400px;
height: 400px;
background-color: #aa9fd5;
margin: 300px auto;
font-size: 50px;
color: white;
}
#example:hover {
transform: skew(30deg) scale(1.5,1.5) rotate(40deg) translateY(150px);
}
style>
head>
<body>
<div id="example">Transformdiv>
body>
Стоит помнить, что подобные манипуляции при статическом отображении не обеспечат у пользователя особого восхищения. Для того, чтобы привлечь внимание пользователя, стоит уделить время добавлению динамики на страницу. Об этом мы поговорим в следующих статьях из этого цикла.
Посібник з обробки комплексних дизайнів з Twitter Bootstrap
Автор: Редакция ITVDN
Введение
Много информации о Twitter Bootstrap в наши дни в мире веб-дизайна и программирования. Люди называют его благом для веб-разработчиков, это возможность проектировать с отсутствием знаний.
В большинстве сценариев веб-разработчиков имеется готовая идея, но невозможно приступить из-за отсутствия дизайн-проекта, над которым нужно работать. Они должны полагаться на дизайнеров, чтобы завершить клиентскую сторону своего проекта. Этот процесс является серьезной потерей времени для разработчика, для которого имеет значение, чтобы идея воплотилась в реальность как можно скорее. В таких сценариях Twitter Bootstrap приходит на помощь.
Twitter Bootstrap – CSS фреймворк, он помогает в разработке веб-приложений. Он один из простых CSS фреймворков. Предполагается, что у Вас нет знаний в проектировании дизайна, все что Вам нужно - это написать немного HTML кода согласно спецификациям Bootstrap. В нем уже написаны для Вас CSS стили, также он имеет встроенную поддержку jQuery, и некоторые популярные инструменты JavaScript.
Начинаем
Чтобы приступить к использованию Twitter Bootstrap, Вам нужно скачать bootstrap.zip с официального сайта. Он содержит в себе набор файлов, а именно css, js и img, которые Вам понадобятся, чтобы начать создание веб-сайтов с Twitter Bootstrap. Папка “css” имеет таблицу стилей для адаптивного и неадаптивного дизайна. Она понадобиться для того, чтобы быстрее сделать сайт. Папка “js” имеет bootstrap.js. JavaScript файлы, которые содержат различные компоненты. В последней папке “img” содержится два набора одинаковых иконок, за исключением их фонового цвета. Изображения halflings были предоставлены glyphicons, и предоставляются бесплатно в проекте Twitter Bootstrap.
До того, как приступить к работе, откройте Ваш текстовый редактор и создайте первый файл с именем “index.html”. Сохраните его в корневой папке Вашего проекта.
Основной HTML шаблон для работы с Bootstrap
Для активации Bootstrap фреймворк необходимо включить все нужные файлы и создать HTML-структуру. Сначала Вам необходимо построить структуру, а затем определить, какие файлы потребуются. Сперва, на что нужно обратить внимание, это то что HTML5 требует doctype:
DOCTYPE html>
Устанавливаем meta кодировку в utf-8, потому что в проекте потребуется использовать специальные символы, для того чтобы браузер правильно их отображал. Twitter Bootstrap также указывает на использование utf-8 в их документации для лучшей совместимости.
<meta charset="utf-8">
Когда Вы установите стандартные HTML-теги, такие как
, и
Теперь Вам нужно перейти к подключению необходимых таблиц стилей bootstrap.css.
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
Теперь CSS готов, далее Вам необходимо включить все необходимые JavaScript файлы. Во-первых, необходимо включить файл jQuery, для этого подключим jQuery CDN.
<script src="http://code.jquery.com/jquery-1.10.1.min.js">script>
Затем подключаем Bootstrap файл.
<script src="js/bootstrap.js">script>
Все эти скрипты должны лежать чуть выше в конце тега .
Наконец, закончили с процессом подключения всех необходимых файлов. Ваш index.html выглядит так.
Понимание того как это работает
Во-первых, Вам нужно помнить, что Twitter Bootstrap во многом зависит от 12 сеток. Итак, о каких сетках идет речь?
Предположим, Вы хотите две большие равные части внутри body в вашей странице index.html. Вы должны передать класс “span6” для каждого элемента div. Это говорит о том, что Bootstrap сделает две равные части, которые должны охватывать шесть сеток по бокам. Он имеет набор предопределенных классов для каждого элемента. Вы должны передавать соответствующие классы для каждого в случае необходимости.
Работа с Bootstrap
Разделим демо-страницу на пять основных частей:
The header
The marketing area
The leftside bar
The contents area
The footer
Чтобы обернуть все содержавшееся в наш веб-сайт, Вам нужно создать контейнерный класс, который должен быть с центра до середины экрана, а также имеет отступы со всех сторон. Для этого Bootstrap имеет класс “container”, который Вы будете использовать в качестве родительской оболочки. Итак, идем дальше и пишем следующий кусок кода:
<div class="container">
Теперь поместим во внутрь контейнера div заголовок сайта. Для этого Вам нужно использовать тег h1.
<h1><a href="#">Bootstrap Sitea>h1>
Страница index.html будет размещена по центру. Время для панели навигации. Twitter Bootstrap предлагает следующую разметку для панели навигации:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Homea>li>
<li><a href="#">Projectsa>li>
<li><a href="#">Servicesa>li>
<li><a href="#">Downloadsa>li>
<li><a href="#">Abouta>li>
<li><a href="#">Contacta>li>
ul>
div>
div>
div>
“navbar” должен быть задан классом в основной панели навигации. Вам нужно следовать за вышеупомянутой разметкой, чтобы выглядело согласно стилю Twitter Bootstrap. Поместите код чуть ниже тега . Удостоверьтесь, что Вы помещаете все в родительском классе оболочки, т.е. “container”. Перейдите к браузеру и проверьте страницу, увидите красивую панель навигации, чуть ниже заголовка сайта.
Конечно же, хочется, чтобы заголовок, выглядел немного иначе. В конце статьи будет рассмотрено, как Вы можете добавить свои стили, в существующие стили Bootstrap и добавить немного больше CSS для оформления заголовка. Давайте двигаться дальше, чтобы сделать вторую часть, которая называется “The marketing area”.
Есть предопределенный класс, предоставленный Twitter Bootstrap для области “The marketing area”. Ему дали название класс “hero-unit”. Далее копируем приведенный ниже код и вставляем его ниже навигации div.
<div class="hero-unit">
<h1>Marketing stuff!h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.p>
<a href="#" class="btn btn-large btn-success">Get Starteda>
div>
Не написав ни одной части CSS, у Вас есть такая красивая “The marketing area”.
Приступим к самой интересной части - создание ссылок и кнопок. Вы можете создать любую ссылку, при этом она будет выглядеть так, как кнопка, добавив класс “btn”, и затем можно изменять ее размер, добавив несколько дополнительных классов, таких как btn-large/btn-small/btn-mini. Для изменения цвета кнопок добавим классы, такие как btn-success (зеленый), btn-info (светло-голубой), btn-warning (желтый) и btn-danger (красный). Подробнее о кнопках и украшениях ссылок можно найти в Twitter Bootstrap Base CSS section. Эти классы применяются к HTML элементу button.
Теперь перейдем дальше, к панели левой стороны и содержанию. Как говорилось ранее, Twitter Bootstrap - это система из 12 сеток. Это означает, что Вы можете создать самое большое количество: это 12 сеток по вертикали, в любом родительском элементе.
В настоящее время работаем в родительском классе “container”. Таким образом, разделим раздел на две неравные части, используя 12 сеток. Для левой стороны панели Вам нужно использовать класс “span4” и для правой стороны будем использовать “span8”. Имена классов показывают, что левая сторона должна охватить четыре сетки, а правая оставшиеся восемь.
<div class="row">
<div class="span4">
<p>Dummy Textp>
div>
<div class="span8">
<p>Dummy Textp>
div>
div>
Вам нужно создать два отдельных столбца, стоящие рядом. По умолчанию классы span* выравниваются по левому краю. Чтобы разместить столбцы ниже всего содержимого, Вам нужно добавить “row”. Это действует, как традиционная строка таблиц. Теперь заполним левый столбец навигационным списком.
Для создания навигационного списка следуйте следующей разметке.
<ul class="nav nav-list">
<li class="nav-header">What we are?li>
<li class="active"><a href="#">Homea>li>
<li><a href="#">Our Clientsa>li>
<li><a href="#">Our Servicesa>li>
<li><a href="#">About Usa>li>
<li><a href="#">Contact Usa>li>
<li class="nav-header">Our Friendli>
<li><a href="#">Googlea>li>
<li><a href="#">Yahoo!a>li>
<li><a href="#">Binga>li>
<li><a href="#">Microsofta>li>
<li><a href="#">Gadgetic Worlda>li>
ul>
Вам нужно добавить класс “nav-list” в дополнение к классу “nav”, и это будет выглядеть как список. Добавляем класс “nav-header” к любому элементу “li”, “nav” класс будет выглядеть так, как заголовок в разделе ссылки.
Перемещаясь в “The contents area”, Вы будете просто заполнять его общими тегами
и тегами
. Никакие дополнительные классы не нужны, поскольку хотим, чтобы элементы выпадающего списка появлялись друг за другом, один ниже другого. Ниже приведен код, поместите его внутри “span8”.
<h3>How we started?h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<h3>How do we market?h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
Как Вы можете видеть, почти закончили создание окончательного дизайна. Далее просто осталась часть “the footer portion”.
Для “the footer portion”, будем снова делить “row” на три части. На этот раз раздел будет находиться в равных частях “span4”. Таким образом, Вы создадите еще одну строку div. Выполните приведенный ниже код:
<div class="row">
<div class="span4">
<h4 class="muted text-center">Meet Our Clientsh4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<a href="#" class="btn"><i class="icon-user">i> Our Clientsa>
div>
<div class="span4">
<h4 class="muted text-center">Know Our Employeesh4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<a href="#" class="btn btn-success"><i class="icon-star icon-white">i> Our Employeesa>
div>
<div class="span4">
<h4 class="muted text-center">Reach Ush4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<a href="#" class="btn btn-info">Contact Usa>
div>
div>
С помощью класса “span4” разделили строку на три равные части, а затем заполнили каждую из них с помощью тега
, они выглядят как кнопки. Проверьте результат в браузере. Вы увидете маленькие изображения внутри кнопки, Our Clients и Our Employees. Вам нужно использовать тег и добавить соответствующие классы изображений, icon-user, icon-star, icon-glass и т.д. Чтобы изменить значок для белого, используйте icon-white вместе с icon-user и icon-star. Полный список значков классов можно найти в документации Bootstrap.
Чтобы добавить интервал между областью нижнего колонтитула и над содержанием, Вам нужно добавить тег
между каждой “row”. Вставте тег
и посмотрите на демо-страницу.
Теперь для области авторского права, добавим следующий код:
<hr>
<div class="footer">
<p>© 2013p>
div>
Итак, наконец, создали простую, но достойную целевую страницу, используя чисто Twitter Bootstrap framework.
Добавление пользовательских стилей к Twitter Bootstrap
Если у Вас есть немного знаний в CSS, и Вы хотите настроить Bootstrap стили по умолчанию, то лучший способ — это создать собственную пользовательскую таблицу стилей, импортировать Bootstrap’s Style в верхней части, а затем переопределить стили в свой CSS-файл. Убедитесь, что ссылка именно на Вашу пользовательскую таблицу стилей, а не для Bootstrap CSS. Если для Вас достаточно таблиц стилей по умолчанию (Twitter Bootstrap), то Вам не нужно создавать пользовательскую таблицу стилей. Многие веб-сайты могут использовать эту структуру, и она станет общем стилем, который можно будет увидеть в каждом другом сайте, созданном с Bootstrap. Поэтому лучше добавить свою собственную таблицу CSS вверху Bootstrap CSS.
@import url("bootstrap.min.css");
Некоторые более важные компоненты из Twitter Bootstrap
Выделенный параграф
Чтобы выделить абзац посреди длинного документа, можете добавить класс “lead” к нему. Это сделает шрифты определенного абзаца немного больше, чем остальная часть документа.
Теги акцентирования
Вы можете также использовать стандартные теги и внутри html-страницы. Теги также будут работать.
Выравнивание текста
Внутри абзацев или div-тегов можно выравнивать текст с помощью классов: “text-left”, “text-center” и “text-right”.
Цвет текста
Можете установить цвет для текста абзаца по умолчанию, используя различные цвета текста как “muted” для серого, “text-warning” для красных, “text-error” для глубокого темно-бордового, “text-info” голубого и “text-success” для зеленого.
Стиль таблицы
Twitter Bootstrap имеет ту же самую конструкцию таблиц по умолчанию. Выполните следующую разметку:
<table class="table">
<tr>
<td>td>
<td>td>
tr>
...
table>
Работа с изображениями
Вы также можете добавлять изображения, используя обычный тег. Чтобы сделать Ваш дизайн более интересным, добавьте такие классы, как “img-rounded” для изображений с закругленными углами, “img-circle” для прокрутки изображений и “img-polaroid”, чтобы дать тень и радиус.
Выпадающее меню
Для создания выпадающего меню в уже существующую панель навигации, как показано в демо-странице, добавьте следующую разметку.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-large">i> Drop Down
<b class="caret">b>
a>
<ul class="dropdown-menu">
<li><a href="#">Item1a>li>
<li><a href="#">Item2a>li>
<li><a href="#">Item3a>li>
ul>
li>
Для выпадающего списка нужно обернуть родительский элемент с помощью класса “dropdown”, а затем использовать по умолчанию разметку “a”, и потом вложить еще один элемент
со списком элементов.
Источник: http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/
Нові функції C# 6.0
Автор: Редакция ITVDN
Введение
В первой статье мы рассказывали Вам про инициализацию авто свойств. На этой неделе мы расскажем Вам про функции строковой интерполяции/строкового сцепления (string interpolation/string concatenation).
Разработчики регулярно форматируют строковые значения при разработке программы. Как правило, используется метод String.Format(), который заменяет каждый форматируемый элемент в указанной строке текстовыми значениями из объектов. Зачастую это сбивает с толку и приводит к ошибкам.
// Старый способ строковой интерполяции с использованием оператора «+»
Console.WriteLine("\n Fullname : ” + p.FirstName + " " + p.LastName +
”\n Joining : " + p.Joining);
// Старый способ строкового сцепления с использованием string.Format
Console.Writeline(string.Format("\n Fullname : {0} {l}\n Joining : {2}",
p.FirstName, p.LastName, p.Joining));
В C# 6.0 Microsoft добавила новую функцию для ускорения процесса написания кода. Теперь Вы можете поместить выражение непосредственно в “string literal” для отображения значений в правильном форматировании.
Вот несколько примеров функций:
// Помещает выражение туда где оно нужно
Console.Writeline("\n Fullname : \{p.FirstName} \{p.LastName}\n Joining : \{p.Joining}");
// Дополнительные выравнивания и спецификации формата
Console.Writeline("\n Product: \{p.Name, 10} \n Price : \{p.Price : C2}");
// Условия для string literals с дополнительными строками в качестве контента
Console.WriteLine("\n Product: \{p.Name} \n Price : \{p.Price} \{(p.Price == 1 ? "rupee" : "rupees")}");
Ознакомиться и протестировать данный код можно, скачав Visual Studio 2015 и .NET 4.6
Надеемся, что вам понравилась данная функция. Разработчики все еще продолжают работать над ней, и в будущем они обещают добавить более простой способ обеспечения условий в строках. Возможно, данные функции будут добавлены в следующем релизе Visual Studio 2015.
Источник: http://www.kunal-chowdhury.com/2014/11/csharp-6-string-interpolation.html
Змінюємо яскравість екрану в C# додатках
Автор: Редакция ITVDN
Введение
Данный инструмент помогает корректировать яркость дисплея для Вашего C# приложения. Он поддерживается всеми мониторами и видеокартами.
Выбираем основу
Мы будем использовать функцию SetDeviceGammaRamp, она подходит к различным мониторам. Вы могли слышать про WMIBrightness, но, к сожалению, не все видеокарты поддерживают эту функцию.
Пишем код
В данном методе требуется использования двух форм. Одна будет содержать элементы управления и список функций, а другая будет открываться “fullscreen” и будет полностью прозрачной.
this.TopMost = true;
this.Opacity = 0.5D;
this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
Для прозрачной формы используем функцию WndProc, для того чтобы все WM_NCHITTEST сообщения проходили через нее.
protected override void WndProc(ref Message m)
{
if (m.Msg == 0x0084) // WM_NCHITTEST
m.Result = (IntPtr)(-1); // HTTRANSPARENT
else
base.WndProc(ref m);
}
В форму, содержащую в себе элементы управления и функции, добавим функцию регулировки и обновления яркости. Она выполняется при загрузке формы или при изменении позиции слайдера.
void UpdateBrightness()
{
float f = trackBarBrightness.Value * 0.01f;
if (f < 0.5f)
{
program.screenForm.Opacity = 1 - 2 * f;
program.screenForm.BackColor = Color.Black;
}
else
{
program.screenForm.Opacity = 2 * (f - 0.5f);
program.screenForm.BackColor = Color.White;
}
}
Когда форма закрыта, основная программа должна быть закрыта с помощью потокового выхода, иначе яркость будет оставаться, и Вы не сможете закрыть приложение.
private void ControlForm_FormClosed_1(object sender, FormClosedEventArgs e)
{
program.ExitThread();
}
Теперь в программе мы получили функциональную модель изменения яркости экрана с помощью позиции слайдера.
Если Вы хотите попробовать сделать вышеописанное у себя, то скачайте Visual Studio 2013.
Источник: http://www.codeproject.com/Tips/855454/How-To-Change-Screen-Brightness-in-Csharp
Ініціалізація авто властивостей у C# 6.0 у 2015 році
Автор: Редакция ITVDN
Введение
Мы уже писали статью про нововведение в C# 6.0, а сейчас мы хотим более детально рассмотреть одну из функций – инициализацию авто свойств.
После выхода C# 5.0 разработчики просили добавить функцию инициализации объявленных свойств. Раньше при создании файла Вам нужно было инициализировать элементы списком, иногда этот список смотрелся очень громоздко.
Теперь с появлением C# 6.0 можно убрать некоторые строчки кода, тем самым снизить вероятность ошибок при компилировании и увеличить производительность.
Давайте рассмотрим пример старой модели авто свойства:
public string FirstName { get; set; }
Сейчас данная модель немного изменилась, теперь можно присвоить значение по умолчанию для авто свойств в C# 6.0, не используя дополнительную строку. Достаточно просто поместить знак равенства в конце строки и задать значение, которое будет использоватся по умолчанию.
Пример установки значения по умолчанию при объявлении авто свойства:
public class Employee
{
public string FirstName { get; set; } = "itvdn";
public string LastName { get; set; } = "example";
public DateTime JoiningDate { get; set; } = DateTime.Now;
public string Blog { get; set; } = "www.itvdn.com";
}
Теперь при создании нового класса для свойств автоматически устанавливаются значения по умолчанию.
Небольшой пример:
var employee = new Employee();
Console.WriteLine("\n Пользователь: " + Employee.FirstName + " " + Employee.LastName +
"\n Дата регистрации: " + Employee.JoiningDate +
"\n Домашняя страница: " + Employee.Blog);
Console.ReadLine();
Когда Вы скомпилируете приведенный выше код, Вы увидите, что значения по умолчанию выводятся на экран как повторно неинициализированные свойства.
C# 6.0 еще разрабатывается, но уже сейчас с ним можно поработать, скачав Visual Studio 2015. Это, конечно, не полный список нововведений, но по ним видно, что C# - один из самых перспективных языков программирования. Про другие функции мы расскажем Вам в нашей следующей статье.
Источник: http://www.kunal-chowdhury.com/2014/11/csharp-6-auto-property.html
Нові можливості CSS3
Автор: Редакция ITVDN
Введение
CSS3 произвел революцию в мире веб разработки, поскольку он принес много новых функциональных возможностей. Эта технология продолжает развиваться и внедрять новые возможности. В Новом, 2015 году будут добавляться новые свойства, про некоторые из них мы расскажем в этой статье.
CSS - маски
В Webkit браузерах CSS-маски функционируют уже давно. В ноябре 2014 года была опубликована новая спецификация CSS масок, теперь мы ждем, когда поддержку данного свойства получат все браузеры.
Что такое маска? Проще говоря, маской можно назвать изображение с белой или черной фигурой и прозрачным фоном. Применяя маску на изображение или элемент, мы получим маскированное изображение.
Пример:
Маски можно использовать сейчас, но, к сожалению, только в браузерах Webkit отображение будет корректным.
Использование масок в Webkit
На движке Webkit маски выполняются очень легко, просто используйте тег mask.
.element {
-webkit-mask: url('mask.png');
}
Давайте попробуем создать пример. Вот наше изображение маски:
Накладывать маску будем на эту фотографию:
Теперь добавим немного кода:
class="element">
src="image.jpeg" alt="" />
type="text/css">
.element {
width: 500px;
overflow: hidden;
}
.element img {
-webkit-mask: url(mask-image.png);
}
В результате мы получим вот такое изображение:
Кроме того, можно использовать свойства. Например, Вы можете установить позицию:
.element img {
-webkit-mask: url(mask-image.png) 30% 30% repeat-x border-box;
/* .. тоже самое что и.. */
-webkit-mask-image: url(mask-image.png);
-webkit-mask-position: 30% 30%;
-webkit-mask-repeat: repeat-x;
-webkit-mask-box-clip: border-box;
/* Так же можно указать и размер! */
-webkit-mask-size: 30% 30%;
}
CSS-исключения
CSS-исключения (CSS Exclusions) - очень мощная функция, позволяющая изменить отображение контента на странице. Используя только одно свойство, можно поменять весь стиль страницы, это очень похоже на редактирование страницы в редакторе WYSIWYG. Давайте посмотрим на самое интересное свойство - “wrap-flow”.
Wrap-flow
Wrap-flow позволяет определить, какое количество элементов влияет на другие, когда они поверх остальных. Зачастую блоки перекрываются. С помощью wrap-flow все элементы адаптируются под верхний элемент на странице.
Wrap-flow имеет несколько настроек:
auto: обычное состояние, ни один из элементов не регулируется
start: все, что после элемента - удаляется
end: удаляется все, что до элемента
both: удаляется контент под объектом
minimum: удаляется сторона с наибольшим количеством контента
maximum: удаляется сторона с наименьшим количеством контента
clear: c двух сторон от объекта всё содержимое удаляется
Диаграмма для помощи:
Композиции и модели смешивания (Composition and Blending)
Режимы смешивания в CSS стали частью официальной спецификации W3C. Это значит, что Вы можете выполнять затемнения основы (color burn) через CSS. Данная спецификация новая, так что возможны изменения прежде, чем она попадет в другие браузеры. У нее такой принцип работы: есть 2 изображения, они накладываются одно на другое с помощью абсолютного позиционирования.
Это будет выглядеть так:
<div class="blend">
<img src="duck.gif" alt="Duck" class="duck" width="500" height="500" style="position: absolute; top: 0; left: 0" />
<img src="penguin.gif" alt="Penguin" class="penguin" width="500" height="500" style="position: absolute; top: 0; left: 0" />
div>
Пример CSS кода:
.blend {
position: relative;
}
.blend .duck {
mix-blend-mode: overlay;
}
В целом вся конструкция выглядит так:
Если Вам интересно, то можете попробовать режимы наложения прямо сейчас. Для этого Вам необходимо скачать Adobe’s experimental webkit browser
Источник: http://www.inserthtml.com/2013/01/future-css3/
Застосування мультикласів у CSS
Автор: Олександр Марченко
Введение в мультиклассы.
В данной статье мы познакомимся с так называемыми сложными селекторами, особенностями их применения. Для более простого восприятия материала рекомендуем просмотреть пятый видео урок из курса HTML & CSS.
Для начала вспомним, что таблицы стилей собираются из наборов правил, которые содержат один или несколько селекторов и конечно же содержат блок определений. Блок определений ограничен фигурными скобками и содержит в себе перечень свойств и выбранных для них значений.
Селектором может быть любой элемент или HTML-тег, для которого возможно задание неких правил форматирования. Принцип определения селекторов довольно простой и имеет следующий синтаксис: Name {Style_rules}.
Здесь Name – это имя любого элемента на вашей странице, а Style_rules – описание правил стиля, которые вы собираетесь применить к элементу.
Отдельно обратим ваше внимание на универсальный селектор, который используют, когда требуется установить стиль абсолютно для всех элементов, присутствующих в веб-документе. Он имеет следующий синтаксис:
<head>
<title>CSS title>
<style>
/*Используем универсальный селектор, который обозначается "*" */
* {
color:forestgreen;
}
style>
head>
<body>
Text1
<p>Text2p>
<div>Text3div>
<br />
<span>Text4span>
body>
В случае, когда необходимо одновременно задать один стиль для двух и более элементов, их перечисляют через запятую:
<head>
<title>CSStitle>
<style>
/*Используем перечисление селекторов p, div */
p, div {
color:forestgreen;
}
style>
head>
<body>
Text1
<p>Text2p>
<div>Text3div>
<br />
<span>Text4span>
body>
В случае, когда необходимо задать уникальное имя для элемента и по нему изменить его стили или обратиться через JavaScript, целесообразно использовать идентификатор, изредка называемый «ID селектором».
Поскольку при создании html-документа невозможно отказаться от определенной иерархии вложенности, важно задуматься о том, чтобы стили для вложенных элементов применялись корректно. Целесообразно воспользоваться конструкцией из вложенных селекторов. В самом простом случае получим следующую конструкцию: name1 name2 {Style_rules}, где name1 – родительский элемент, name2 – дочерний (вложенный) тег. При этом подразумевается следующая разметка <name1><name2>...name2>name1>.
<head>
<title>CSStitle>
<style>
div p {
background-color: darkgrey;
color: red;
font-size: 20px;
}
style>
head>
<body>
<p>Параграф 1 p>
<div>
<p>Параграф 2 p>
div>
body>
Стоит помнить, что стили, предопределенные для тега div, также возымели бы свое действие на содержимое тега p, также допускается произвольный уровень вложенности тегов.
Данная конструкция имеет следующий синтаксис: #Name { Style rules }. Стоит помнить, что имена идентификаторов должны быть уникальными, дабы не вызывать коллизий при обращениях, начинаться с латинских символов, в них разрешено включать символы дефиса и нижнего подчеркивания «-», «_». Когда необходимо применить стили из идентификатора определенному тегу, используется атрибут id, которому передается значение – имя идентификатора без решетки.
<head>
<title>CSStitle>
<style>
#id1 {
background-color: #ffd800;
color: #ff0000;
font-size: 40px;
}
style>
head>
<body>
<p id="id1">Параграф 2 p>
body>
Порой при определении идентификатора используется конструкция name#id_name {Style rules}, где name может обозначать любой тег. Подобная конструкция ограничивает возможность применения стилей, определенных в идентификаторе только к тегам, одноименным указанному в определении.
Что касается применения классов, они актуальны тогда, когда необходимо задать правила форматирования для определенного селектора или же для нескольких элементов. Существуют следующие варианты использования классов:
.class_name {Style rules}
Класс, определенный таким образом, можно связать с любым тегом, достаточно воспользоваться атрибутом class и передать в его значении имя нашего класса.
Name.class_name {Style rules}
Таким образом накладываются ограничения на применение правил из класса лишь в одноименных тегах Name.
<head>
<title>CSStitle>
<style>
.myFirstClass {
background-color: darkcyan;
color: darkgreen;
font-size: 40px;
}
div.mySecondClass {
background-color: darkcyan;
color: darkgreen;
font-size: 20px;
}
style>
head>
<body>
<p class="myFirstClass">Параграф 1 p>
<p class="mySecondClass">Параграф 1p>
<div class="mySecondClass">Параграф 1 div>
body>
Работая с классами, стоит помнить о том, что любому элементу можно добавить сразу несколько классов, просто перечисляя их в атрибуте class без каких-либо знаков пунктуации, через пробел. При этом к текущему элементу будут применятся стили, описанные в каждом из классов в блоке правил.
<head>
<title>CSStitle>
<style>
.myFirstClass {
background-color: darkcyan;
}
.mySecondClass {
color: darkgreen;
font-size: 20px;
}
style>
head>
<body>
<p class="myFirstClass mySecondClass">Параграф 1 p>
body>
Прибегая к мультиклассам, стоит помнить об особенности их работы с повторяющимися правилами, т.е. одноименными свойствами, которые описаны в разных классах и имеют различные значения.
Укажем несколько одинаковых свойств с разными значениями и посмотрим, какие из них будут применены к элементу:
<style>
.myFirstClass {
background-color: darkcyan;
color: darkgreen;
font-size: 40px;
}
.mySecondClass {
background-color: darkgrey;
color: red;
font-size: 20px;
}
style>
Как видим, значения спорных свойств были взяты из того класса, который был описан в коде ниже. Если сменим их очередность, получим следующий результат:
<style>
.mySecondClass {
background-color: darkgrey;
color: red;
font-size: 20px;
}
.myFirstClass {
background-color: darkcyan;
color: darkgreen;
font-size: 40px;
}
--style>
Что касается порядка обьявления используемых классов в атрибуте class непосредвенно в самом теге, он не имеет значения:
<p class="myFirstClass mySecondClass">Параграф 1p>
<p class="mySecondClass myFirstClass">Параграф 1p>
Эти две строки возымеют одинаковое воздействие на форматирование параграфа.
Способи інтеграції CSS в HTML
Автор: Олександр Марченко
Введение
Привычный нам HTML позволяет задавать структуру веб-документа, изменять внешнее отображение контента с помощью специальных тегов форматирования. Но представьте ситуацию, когда возникает потребность изменить параметры однотипных элементов на сайте, для решения которой придется редактировать все страницы, на которых встречаются вышеупомянутые элементы, с целью изменения описывающих их тегов.
Для решения проблемы целесообразней использовать CSS от Cascading Style Sheets. При этом стилем называют набор правил форматирования, которые будут применены к определенному элементу документа для изменения правил его отображения. При этом если у вас возникает необходимость быстро изменить внешний вид элементов на разных страницах сайта, созданного с помощью одного из стилей, вам достаточно изменить стиль единожды и все элементы поменяют свой внешний вид.
Кроме этого, использование CSS дает вам намного больше возможностей тонкой настройки форматирования, чем в простом HTML. Также поскольку стили можно хранить во внешних, подключаемых файлах, которые в большинстве случаев кэшируются браузерами , их использование позволит ускорить загрузку вашего сайта на пользовательской машине.
Что касается интеграции CSS на html-страницу, существует три разных способа, которые отличаются между собой не только возможностями, но и приоритетом выполнения инструкций.
Способ 1. Внутренние стили
Частный способ использования атрибута style, при котором правила оформления элемента распространяются лишь на тег, в котором данный атрибут указан. Стоит отметить, что значения атрибута style задаются с учетом особенностей языка таблицы стилей.
<p style="color:#0094ff; font-family:'Segoe UI'; font-size:45px">Hello My World! p>
<br/>
<p>Первый простой пример p>
Когда используете внутренние стили, будьте готовы к тому, что для изменения ряда элементов придется внести поправки в каждый из открывающихся тегов. Это должно натолкнуть вас на мысль, что внутренние стили предпочтительно использовать лишь в одиночных тегах, тех, которые встречаются лишь раз, или не использовать данный способ, так как он не придерживается концепции структурного документа, когда .html-документ задает структуру текущей веб-страницы, а .css-документ описывает ее оформление.
Способ 2. Таблицы глобальных стилей – в заглавии самого документа.
При таком варианте использования стили определяются непосредственно в веб-документе и определяются между тегами <head>…</head> веб-страницы внутри тега <style>, можно смело сказать, что этот способ намного превосходит предыдущий в гибкости и по своим возможностям, кроме того он упрощает работу с большим числом стилей на странице.
<head>
<style>
p {
font-family: 'Segoe UI';
font-size: 35px;
color: #43e936;
}
style>
head>
<body>
<p>Второй простой пример p>
<div>
<p>Второй простой пример, повтор р>
div>
body>
Теперь достаточно указать на странице только тег p, и его содержимому будут присвоены все те свойства, которые представлены правилами в теге style.
Способ 3. Таблицы связанных стилей – задаем в отдельном файле.
Пожалуй, один из самых мощных и удобных способов использования стилей и правил отображения элементов для многостраничного сайта. При нем стили, предопределённые разработчиком, размещаются в отдельном файле с произвольным названием example.css, который можно использовать для любой веб-страницы на сайте. Для того чтобы подключить этот файл на странице, необходимо в заголовке страницы (в пределах тега <head>…</head>) использовать тег <link>.
<head>
<title>CSS </title>
<link href="example.css" rel="stylesheet" type="text/css" />
head>
<body>
<pre>Hello World pre>
<br/>
<p>Третий простой пример p>
body>
Содержимое файла example.css:
p {
font-size: 37px;
color: #ff0000;
}
Що нового в C# 6.0
Автор: Дмитро Охріменко
Введение
В этой статье будут рассмотрены несколько новых возможностей предварительной версии языка C# 6.0. Любая изложенная информация может быть изменена.
В 2014 году состоялась очередная Build конференция разработчиков Microsoft. Самым важным событием для .NET разработчиков на этой конференции было объявление о выпуске следующей версии .NET компилятора С# - Roslyn.
Roslyn
Roslyn – платформа компиляторов с открытым исходным кодом для языков C# и Visual Basic. Особенностью платформы является не только открытый код, но и интерфейс API для расширения возможностей компилятора. Используя Roslyn, очень упрощается задача разработки инструментов анализа исходного кода.
В Июне 2014 Microsoft анонсировал выпуск Visual Studio 2014 CTP (Community Technology Preview), которую можно скачать по ссылке. Особенностью данной версии Visual Studio является активное использование нового компилятора Roslyn.
Новые возможности языка С#
Следующие примеры будут работать в Visual Studio 2014 CTP или в Visual Studio 2013 при наличии .NET Compiler Platform (Roslyn) Preview for Visual Studio 2013.
Индексированные члены (Indexed Members) – возможность обращаться к индексам коллекций со строковыми ключами через синтаксис, подобный обращению к свойствам.
Dictionary<string, string> dictionary = new Dictionary<string, string>();
dictionary.Add("FirstName", "Ivan");
dictionary.Add("LastName", "Ivanov");
dictionary.Add("Age", "20");
Console.WriteLine(dictionary.$FirstName); // или dictionary["FirstName"]
Console.WriteLine(dictionary.$LastName);
Console.WriteLine(dictionary.$Age);
Инициализация авто свойств (Auto property initialization) – возможность задать значение авто свойству при его объявлении.
class MyClass
{
public int Prop1 { get; set; } = 10;
public string Prop2 { get; set; } = "Hello world";
}
Основной конструктор (primary constructor) – возможность создать и использовать конструктор без явного определения.
class Human(string firstName, string lastName, int age)
{
public string FirstName { get; set; } = firstName;
public string LastName { get; set; } = lastName;
public int Age { get; set; } = age;
}
Human h2 = new Human("Ivan", "Ivanov", 20);
Выражения объявлений (declaration expressions) – возможность объявить переменную в выражении, например, в параметрах вызываемого метода.
Console.Write("Enter number: ");
string input = Console.ReadLine();
if (Int32.TryParse(input, out var result))
{
Console.WriteLine("Вы ввели значение " + result);
}
else
{
Console.WriteLine("Введен не правильный формат данных");
}
Який план передплати ITVDN вибрати?
Автор: Редакция ITVDN
Перед началом обучения по видеокурсам ITVDN необходимо решить, какой план подписки для вас наиболее подходящий. От этого выбора в большой степени зависит эффективность обучения программированию.
Критерий 1. Выбор специальности
Во-первых, стоит определиться с направлением, в котором вы хотите развиваться. Например, чтобы освоить все курсы, посвящённые frontend разработке, вам будет мало подписки на 1 месяц, для качественного обучения понадобится больше времени (3 или 6 месяцев). Если вы хотите стать .NET разработчиком, то лучше выбирать план подписки на 6 месяцев или на целый год. Для изучения курса Unity Game Development в среднем нужно около полугода. Но, конечно, все еще зависит от уровня подготовки и знаний, которыми вы уже владеете.
Критерий 2. Сколько технологий нужно изучить
Во-вторых, определитесь с количеством курсов, которые вы хотите изучить. Если это количество не больше трёх, то оптимальным решением будет подписка на 1 месяц. Тут следует учесть ваши индивидуальные особенности и скорость восприятия новой информации, а также количество времени, которое вы можете выделить для обучения (1 час в день, 2 часа в день…). Если вы хотите иметь возможность неоднократно возвращаться к ранее изученному материалу, чтобы повторить или углубить знания, лучше оформить подписку на более длительный срок. К тому же, у долгосрочных подписок (3-6-12 месяцев) есть ряд своих преимуществ. Например, доступ ко всем курсам, которые есть в Каталоге на момент покупки, ко всем новым курсам, которые будут появляться в течение срока действия вашей подписки.
Критерий 3. Дополнительные услуги и сервисы
Стоит учесть, что при покупке подписки на 3 или больше месяцев вы получаете возможность личной консультации с тренером и большее количество тестов, сдав которые, вы получаете сертификат и подтверждаете полученные знания.
Планы подписки ITVDN
С чего начать?
Если вы являетесь новым пользователем нашего ресурса и хотите оценить качество предоставляемых услуг, то вам хватит и месячной подписки. Такой же план подойдёт и профессионалам, которые хотят освежить знания или изучить новую технологию.
Еще один очень важный момент! Честно ответьте себе на вопрос: «Сколько времени я готов(а) посвятить изучению курса?» Хорошо подумайте. Ведь мы живём в мире, в котором всё вращается с невероятной скоростью, и управление собственным временем – непростая задача для человека двадцать первого столетия. При выборе подписки учитывайте личные планы и возможность совмещения курсов с работой или учёбой. Но помните, что чем больше времени вы готовы посвятить изучению курса, тем лучше будет результат.
Выбор плана подписки – важный выбор, при осуществлении которого стоит учитывать много факторов. От ваших базовых знаний, желания развиваться в конкретном направлении IT и многих других. Так что анализируйте, выбирайте и двигайтесь вперёд к намеченной цели с ITVDN!