Результати пошуку за запитом: видеокурс c*
Властивість CSS: z-index
Автор: Редакция ITVDN
Введение
В данной статье с помощью некоторых примеров мы научим Вас использовать свойство CSS: Z-index.
Z-index используется для стабилизации порядка элементов, которые перекрываются.
Z-Index является важным свойством CSS. Оно указывает на уровень элемента в стеке. Свойство z-index регулирует вертикальный порядок перекрытия элементов, а сам z-index определяет, какой элемент будет располагаться выше остальных.
Элемент с большим указателем порядка стека всегда будет располагаться выше элемента более низкого порядка. А элемент с самым большим индексом перекроет остальные элементы. «Порядок стека» обращается к позиции элемента по оси Z. Чем выше значение z-индекса, тем ближе элемент будет располагаться к верхней части порядка наложения.
Синтаксис Z-index
z-index: auto| number | initial | inherit;
Z-index: auto
Это настройка по умолчанию, что приписывает одинаковое значение и элементу, и родителю. Если значение не определено для родителя, то оно равняется нулю (0);
Z-index: integer number
Z-index: 1
Z-index: 2
Z-index: 3
Z-index: negative number
Z-index: -1
Z-index: inherit
Принимает такое же определенное значение, как свойство элемента родителя.
Ниже предоставлен HTML код, который будем использовать.
<!DOCTYPE html>
<html>
<head>
<title>Z-Index tutorialtitle>
head>
<body>
<div id="one">Onediv>
<div id="two">Twodiv>
<div id="Three">Threediv>
<div id="Four">Fourdiv>
<div id="Five">Fivediv>
body>
html>
Далее мы используем CSS код для установки внешнего вида всем элементам HTML, что использовались ранее.
#one {
border: solid 5 px silver;
background-color: Aqua;
position: absolute;
z-index: 1;
opacity: 0.5;
height: 100 px;
width: 100 px;
}
#two {
border: solid 5 px silver;
background-color: Green Yellow;
position: absolute;
top: 30 px;
left: 35 px;
z-index: 2;
opacity: 0.5;
height: 100 px;
width: 100 px;
}
#Three {
border: solid 5 px silver;
background-color: Coral;
position: absolute;
top: 60 px;
left: 60 px;
opacity: 0.5;
z-index: 3;
height: 100 px;
width: 100 px;
}
#Four {
border: solid 5 px silver;
background-color: Yellow;
position: absolute;
top: 90 px;
left: 90 px;
opacity: 0.5;
z-index: 4;
height: 100 px;
width: 100 px;
}
#Five {
border: solid 5 px silver;
background-color: MediumSpringGreen;
position: absolute;
top: 120 px;
left: 120 px;
opacity: 0.5;
z-index: 5;
height: 100 px;
width: 100 px;
}
Полный код
<!DOCTYPE html>
<html>
<head>
<title>Z-Index tutorialtitle>
<style>
#one {
border: solid 5px silver;
background-color: Aqua;
position: absolute;
z-index: 1;
opacity: 0.5;
height: 100px;
width: 100px;
}
#two {
border: solid 5px silver;
background-color: Green Yellow;
position: absolute;
top: 30px;
left: 35px;
z-index: 2;
opacity: 0.5;
height: 100px;
width: 100px;
}
#Three {
border: solid 5px silver;
background-color: Coral;
position: absolute;
top: 60px;
left: 60px;
opacity: 0.5;
z-index: 3;
height: 100px;
width: 100px;
}
#Four {
border: solid 5px silver;
background-color: Yellow;
position: absolute;
top: 90px;
left: 90px;
opacity: 0.5;
z-index: 4;
height: 100px;
width: 100px;
}
#Five {
border: solid 5px silver;
background-color: MediumSpringGreen;
position: absolute;
top: 120px;
left: 120px;
opacity: 0.5;
z-index: 5;
height: 100px;
width: 100px;
}
style>
head>
<body>
<div id="one">Onediv>
<div id="two">Twodiv>
<div id="Three">Threediv>
<div id="Four">Fourdiv>
<div id="Five">Fivediv>
body>
html>
Наш результат:
Заключение
Надеемся, что данная статья Вам понравилась. Она будет полезной для новичков в HTML и CSS.
Источник: http://www.c-sharpcorner.com/UploadFile/88d8c0/z-index-property-in-css/
Розробка ASP.NET 5 веб-застосунків з Visual Studio Code
Автор: Редакция ITVDN
Введение
10 лет назад трудно было вообразить, что разработка ASP.NET веб-приложений вне интегрированной среды разработки Visual Studio .NET буде возможна. Но в прошлом году произошли изменения. В апреле 2014 года на конференции разработчиков (Build) Microsoft анонсировал запуск нового легкого кросс-платформенного кодового редактора для разработки современных веб-приложений под именем Visual Studio Code.
Visual Studio Code
Visual Studio Code свободна для скачивания с официального сайта. Работаете ли Вы на Linux, Mac или Windows – не имеет значения. Вы можете скачать и запустить VS код на своей платформе.
Установка Visual Studio Code довольно проста, но если Вы застрянете, то всегда можете просмотреть документацию по установке.
Visual Studio Code является просто редактором кода на файловой основе и не имеет всех преимуществ полной интегрированной среды разработки Visual Studio .NET. Он легче по дизайну. Тем не менее, у редактора есть множество особенностей, которые поддерживают такие технологии, как IntelliSense для дополнения кода, Peek Definition для быстрого взгляда на функциональный код без навигации, реорганизацию кода и прочие. Visual Studio Code также поддерживает множество языков, например CoffeeScript, F#, Go, Jade, Java, Handlebars, Powershell и Python, для примера. Вы можете проверить языковую поддержку здесь.
Также Visual Studio Code способен поддерживать такие среды выполнения, как ASP.NET 5 и Node.JS. Если Вы их используете для веб-разработки с Microsoft Stack, можете быть уверенны, что ASP.NET 5 (новая версия ASP.NET) сейчас поддерживает кросс-платформенную разработку. Это значит, что можно разрабатывать ASP.NET-приложение в среде Linux, Mac или Windows так же, как и запускать его в любой из них. И Вам даже не нужно иметь интегрированную среду разработки Visual Studio .NET, чтобы сделать это.
Visual Studio Code – это все, что вам нужно, чтобы начать работать с ASP.NET 5, и это здорово!
Установка ASP.NET 5 & DNX (среды выполнения .NET):
ASP.NET 5 был построен с нуля, чтобы убедиться, что он придерживается современной парадигмы веб-приложений, и что приложения, разработанные с его помощью являются «облачными». Ключевыми аспектами ASP.Net 5 являются гибкость и модульность – он предлагает минимальные накладные расходы и позволяет нам выбирать только то, что мы хотим в рамках нашего веб-приложения.
DNX расшифровывается как Dot Net eXecution Environment.
Что такое Yeoman?
Если Вы работали в интегрированной среде разработки Visual Studio .NET, Вам будет интересно: «Есть ли здесь File > New > ASP.NET шаблон проекта?» Visual Studio Code является редактором кода на файловой базе, так что Вы можете просто открыть файл и начать редактирование. Кроме того, нужны поддерживающие средства, чтобы работать с исполняемым шаблоном ASP.NET.
Yeoman является популярным консольным инструментом для автоматического построения структуры проекта, а также обеспечивает базовым ASP.NET шаблоном для старта. Yeoman может быть установлен с помощью NPM, но для начала надо установить Node.JS.
Если у Вас нет Node в системе, можете установить его. Кроме Yeoman, Вам также нужны другие поддерживающие средства, такие как генератор ASP.NET, исполнитель задач Grunt и Bower. Вы можете выполнить это за одну команду. В командной строке набрать следующую команду и нажать enter:
npm install –g yo grunt-cli generator-aspnet bower
Теперь Вы можете строить веб-приложения.
Создание веб-приложения
Разберем пошагово, как построить структуру проекта нового ASP.NET 5 веб-приложения.
1. Откройте командную строку и перейдите в папку, где Вы хотите создать свое новое веб-приложение.
2. Введите в командную строку следующую команду:
yo aspnet
3. Yeoman отобразит варианты приложений для генератора aspnet. Возможные варианты:
консольное приложение
веб-приложение
основное веб-приложение (без членов/аутентификации)
веб-приложение API
Nancy ASP.NET приложение
библиотека классов
тестовый проект Unit
Выберите сейчас основное приложение. Используйте клавиши со стрелками для выбора опции и нажмите enter.
4. Дальше нам нужно назвать веб-приложение. Используем HelloWorld как имя нашего образца ASP.NET 5 веб-приложения. Введите имя и нажмите enter. Yeoman построит структуру проекта.
5. Каталог, в котором будет создано наше веб-приложение будет иметь то же имя, что мы дали только что Yeoman. В данном случае - “HelloWolrd”.
cd HelloWorld
6. Через командную строку откройте Visual Studio Code
code
7. Visual Studio Code запустит проект HelloWorld. Файлы в проекте будут отображаться в окне Проводника.
8. В редакторе Visual Studio Code выберите View > Command Palette option
и в командной палитре введите следующую команду:
dnx: dnu restore - (HelloWorld)
Выше написанная команда restore устанавливает нужные NuGet пакеты, необходимые для запуска веб-приложения. Она запустит командную строку, куда будут загружаться все пакеты. После выполнения будет получено сообщение, что загрузка завершена.
Запуск веб-приложения
Теперь, когда мы успешно создали веб-приложение, пришло время запустить его и посмотреть на результат.
1. В Visual Studio Code откройте Command Palette, выбрав View > Command Palette. Введите следующую команду для запуска приложения:
dnx: kestrel -(HelloWorld,Microsoft.AspNet.Hosting--server Kestrel–config hosting.ini
Примечание: Когда Вы начинаете набирать команду, командная палитра подскажет Вам полную команду в списке. Вы можете выбрать команду из списка и команда будет выполнена.
2. Откройте браузер и перейдите по ссылке http://localhost5000
Мы только что создали ASP.NET веб-приложение вне интегрированной среды разработки Visual Studio. Фактически, в настоящее время ASP.NET больше не только в Windows. Мы переходим на кросс-платформу – как с точки зрения разработки, так и размещения.
Интеграция Telerik UI для набора ASP.NET MVC
Teleric предлагает пользовательский интерфейс, известный как UI для ASP.NET MVC. Он произошел от Kendo UI и предусматривает HTML-помощников, которых называют “Kendo UI wrappers.” Они упрощают работу с элементами управления Kendo UI и ускорят вашу разработку.
Представим пошагово добавление пользовательского интерфейса для ASP.NET MVC в наш проект:
1. Откройте файл project.json и в узле (“dependencies”) добавьте Kendo (в настоящее время доступна бинарная версия Kendo Mvc – 2015.2.805).
"dependencies":{
...
"Kendo.Mvc":"*"
}
2. Дальше откройте Startup.cs и найдите метод “ConfigureServices”. Добавьте следующий фрагмент в метод.
//Register UI for ASP.NET MVC Helpers
Services.AddKendo();
3. Затем откройте ~/Views/_ViewImports.cshtml и импортируйте пространство имен Kendo.Mvc.UI.
@using Kendo.Mvc.UI
4. Скопируйте Kendo UI ресурс с клиентской стороны. Для этого Вам нужно установить пакет Kendo UI Professional (Commercial Package). Его можно установить через Bower с помощью следующей команды:
bower install https://bower.telerik.com/bower-kendo-ui.git
Пакет Kendo UI Professional Bower размещается в частном git-хранилище и требует активировать аккаунт Telerik. Во время установки Вам предложат ввести пароль несколько раз.
Bower установит пакет Kendo UI Professional как “kendo-ui” в папку wwwroot/lib.
5. Дальше нам необходимо зарегистрировать скрипты Kendo UI и стили в ~/Views/Shared/_Layout.cshtml.
<head>
...
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.dataviz.bootstrap.min.css" />
head>
6. Теперь давайте используем виджет Kendo UI в одном из видов. Мы будем использовать виджет Kendo UI DatePicker. Откройте ~/Views/Home.Index.cshtml и добавьте следующий фрагмент:
<body>
...
<script src="~/lib/kendo-ui/js/kendo.all.min.js">script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js">script>
@RenderSection("scripts", required: false)
body>
7. Запустите веб-приложение через dnx: kestrel команду, что мы использовали ранее. Результат представлен ниже.
Заключение
Готово. У нас есть законченное веб-приложение ASP.NET 5, интегрированное с Telerik UI для ASP.NET MVC виджетов, разработанное только использованием Visual Studio Code с поддержкой таких инструментов, как Yeoman и Bower.
Надеемся, Вам понравилось!
Источник - http://developer.telerik.com/featured/developing-asp-net-5-web-apps-with-visual-studio-code/
Об'єктно-орієнтоване програмування C# у деталях
Автор: Редакция ITVDN
Введение
Большое количество статей посвящены C # OOП, но в данной C # OOП объясняется на понятных примерах.
1. Класс
Класс - это макет. Что такое макет?
Макет – это схематический чертеж плана будущего проекта. Например, если Вы планируете строить новый дом, инженер объяснит план его конструирования, демонстрируя макет, как на рисунке ниже. После этого инженер на основе макета начнет строительство дома.
Как и макет, у класса есть чертеж программы. Используя класс, можно создать собственный метод, указать значения переменных, а через объекты получить доступ к методам классов и их переменным значениям. Класс должен иметь значения переменных, методы и объекты.
ООП проще объяснить на примерах из жизни. Представьте дом в качестве примера для класса. В доме есть комнаты: гостиная, спальня, кухня - и техника, например, телевизор и холодильник. Владелец дома может пользоваться всеми комнатами и приспособлениями своего дома. То же можно сказать и о классе с группой методов и значений переменных. Комнаты с техникой – пример методов и значений переменных. Чтобы использовать класс, методы или значения переменных, используются объекты. Объекты являются примерами класса.
Дом без комнат и техники будет пустым и никто не будет в нем жить, пока комнаты и техника не появятся. Пустой дом - класс. Так что же такое использование класса без методов и значений переменных?
Для этого рассмотрим пример целостного дома. Аналогично, класс будет идти вместе с группой значений переменных, методов и объектов.
Классы и объекты – фундаментальные понятия объектно-ориентированного программирования (ООП).
Класс запускается введением ключевого слова «класс» и рядом указывается название Вашего класса. Вы можете дать любое название для класса. Далее нужно открыть и закрыть скобки, как показано на примере.
class ShanuHouseClass1
{
}
2. Объект
Владелец дома может получить доступ и использовать все комнаты дома и технику. Аналогично, для доступа к классовому методу и значениям переменных нужно использовать объекты. Можно создать один или несколько объектов для того же класса. Например, можно сказать, что бывает один или много владельцев дома.
Ниже Вы увидите пример объекта, где "objHouseOwner" - это объект класса, который будет использоваться для доступа ко всем переменным параметрам и методам класса.
ShanuHouseClass1 objHouseOwner = new ShanuHouseClass1();
3. Значение переменной
Значения переменных используются для хранения наших характеристик. Наша характеристика может быть представлена в числовом виде или в виде текста. Например, чтобы сохранить номер телефона, можно использовать тип переменной "int", а чтобы сохранить имя, можно использовать измененный тип строки с именем для каждой переменной.
Переменные могут быть локальными или глобальными. Например, если Вы покупаете новый телевизор, к Вам придет специалист, чтобы настроить телевидение. Он даст Вам свой контактный номер на будущее. Скорее всего, Вы запишите его номер на бумажке и положите ее туда, где сможете быстро найди, когда она понадобится. Если Вы будете хранить этот листок на видном месте, то все Ваши гости смогут увидеть его. Глобальные или общие переменные похожи на этот пример. Если определить значение переменной как глобальное, то все методы внутри класса смогут получить доступ к значению переменной. Если Вы храните бумажку с номером в известном только Вам месте, то только Вы и видите контактный номер. Локальные частные переменные с этим схожи.
Синтаксис значений переменных:
Модификаторы доступа-тип данных-имя переменной
По умолчанию доступ к модификаторам скрыт. Вы можете использовать общий доступ для переменных.
Пример переменной:
int noOfTV = 0;
public String yourTVName;
private Boolean doYouHaveTV = true;
class ShanuHouseClass
{
int noOfTV = 2;
public String yourTVName = "SAMSUNG";
static void Main(string[] args)
{
ShanuHouseClass objHouseOwner = new ShanuHouseClass();
Console.WriteLine("You Have total " + objHouseOwner.noOfTV + " no of TV :");
Console.WriteLine("Your TV Name is :" + objHouseOwner.yourTVName);
}
}
В предыдущем примере программ Вы определили два значения переменных внутри класса. При применении основного метода создается объект класса. Можно получить доступ к значению переменной класса и вывести изображение.
Основным методом является метод по умолчанию в C#, где каждый консоль и приложение для Windows начнет выполнять программу. В основном методе можно определить объект для класса и использовать его, можно получить доступ ко всем значениям переменных параметров и методов класса.
Допустим, что каждый дом имеет въездные ворота. Используя ворота, Вы попадаете в свой дом. Аналогично, чтобы запустить программу, должен быть метод по умолчанию, который будет запускать программу. Основной метод полезен при запуске программы. Каждый раз, когда Вы будете запускать C# Console или приложение Windows, основной метод будет выполняться первым. Из основного метода можно создать объект для других классов и использовать их методы.
4. Метод или функции (метод функционирования)
Метод – это группа из операторов кода. Вот предыдущий пример программы с методом функционирования.
class ShanuHouseClass
{
int noOfTV = 2;
public String yourTVName = "SAMSUNG";
public void myFirstMethod()
{
Console.WriteLine("You Have total " + noOfTV + "no of TV :");
Console.WriteLine("Your TV Name is :" + yourTVName);
Console.ReadLine();
}
static void Main(string[] args)
{
ShanuHouseClass objHouseOwner = new ShanuHouseClass();
objHouseOwner.myFirstMethod();
}
}
Примечание: Большинство разработчиков интересовались разницей между методами и функциями. В этой статье понятие метода используется вместо понятия функции. Тем не менее, есть одно отличие между методами и функциями. В ООП языках, таких как C #, Java и т.д. используется термин метод, а для не-ООП программирования, таких как "C" и других – функция.
Использование методов.
Предположим, что у Вас есть мобильный телефон и Вы храните на нем много песен. Тем не менее, Вы всегда любите слушать определенные песни. Очень сложно каждый раз выискивать из сотен песен на телефоне любимую и проигрывать ее. Вместо того, чтобы проделывать одну и ту же работу много раз, Вы можете использовать плейлисты. Щёлкните на плейлист и слушайте любимую музыку. Это облегчит Вашу работу, и Вам не придется повторять одни и те же действия постоянно. Методы используются как плейлист. Можно писать повторные коды для одного метода, а затем при необходимости использовать его.
В доме может быть одна большая комната или несколько комнат, и в каждой есть какое-то оборудование. Точно так же в классе можно увидеть один или несколько методов. В доме может быть две или три спальни, но кажая спальня отличается по размеру, цвету и так далее. Это означает, что одни и те же комнаты все равно разного типа. Так и в классе можно создать более одного метода с тем же именем, но с другим параметром. В ООП это называется "полиморфизм".
Синтаксис функций.
Модификаторы доступа, тип возвращения, название метода (список параметров):
Модификаторы доступа: о них будет сказано далее в статье.
Тип возвращения: Если Ваш метод возвращает значение, тогда Вам следует использовать тип возвращения с любым типом данных, такие как string, int и так далее. Если метод не возвращает значение, используйте тип "Void".
Название метода: Здесь Вы задаете имя каждому методу.
Список параметров: список параметров или аргументов, которые Вы передаете функции.
Ниже приведен пример способа.
• Метод с типом Void: Void - ключевое слово, благодаря которому данные из методов не возвращаются.
public void veranda()
{
Console.WriteLine("Welcome to Veranda");
Console.WriteLine("How Many Chairs Do you have in your Veranda");
NoofChair = Convert.ToInt32(Console.ReadLine());
Console.WriteLine("I have total " + NoofChair + " Chairs in my Veranda");
}
• Метод с типом возврата: метод обернется в какой-то результат, который может использоваться в программе. Например, возьмем метод TVNAME с типом возврата "String". Можно сказать, что у Вас в доме есть телевизор в гостиной, родительской спальне и детской. В каждой комнате стоит телевизор разных фирм. Предположим, Вы хотите узнать название бренда телевизора. Вам нужно ввести один и тот же код трижды. Вместо повторного написания одинакового кода, Вы можете воспользоваться методом с типом возврата.
public string TVNAME()
{
Console.WriteLine("Enter Your TV Brand NAME");
YOURTVName = Console.ReadLine();
return YOURTVName;
}
• Метод со списком параметров: До сих пор Вы видели методы без параметров. Параметры используются для передачи некоторых данных методу, чтобы осуществить Ваш процесс как нельзя лучше. Например, Вы хотите перекрасить спальни. Вам нужно посоветоваться со всеми членами семьи, которые проживают с Вами в доме, по поводу цвета стен в спальнях. Вы можете задать имя пользователя и их любимый цвет в качестве параметра метода.
public void BedRoom(String nameandColor)
{
Console.WriteLine(nameandColor);
}
Тот же самый метод с другими параметрами называется методом перегрузки. Пример метода Вы найдете ниже. Оба метода называются одинаково, но имеют разные параметры.
public void BedRoom(String MemberName,String Color)
{
Console.WriteLine(MemberName + " Like " + Color + "Color");
}
Пример законченного класса с основным методом:
class ShanuHouseClass1
{
int NoofChair = 0;
public String YOURTVName;
private Boolean DoyouHaveTV = true;
public void veranda()
{
Console.WriteLine("Welcome to Veranda");
Console.WriteLine("How Many Chairs Do you have in your Veranda");
NoofChair = Convert.ToInt32(Console.ReadLine());
Console.WriteLine("I have total " + NoofChair + " Chairs in my Veranda");
}
public string TVNAME()
{
Console.WriteLine("Enter Your TV Brand NAME");
YOURTVName = Console.ReadLine();
return YOURTVName;
}
public void BedRoom(String nameandColor)
{
Console.WriteLine(nameandColor);
}
public void BedRoom(String MemberName,String Color)
{
Console.WriteLine(MemberName + " Like " + Color + "Color");
}
static void Main(string[] args)
{
ShanuHouseClass1 objHouseOwner = new ShanuHouseClass1();
objHouseOwner.veranda();
String returnvalue = objHouseOwner.TVNAME();
Console.WriteLine("Your TV BRAND NAME IS: "+returnvalue);
objHouseOwner.BedRoom("My Name is Shanu I like Lavender color");
objHouseOwner.BedRoom("My Name is Afraz I like Light Blue color");
objHouseOwner.BedRoom("SHANU", "Lavender");
Console.ReadLine();
}
}
5. Модификаторы доступа
Модификаторы доступа не что иное, как использование и ограничение типа значений переменных, методов и класса. Это можно назвать пределом безопасности.
Шесть основных модификаторов доступа:
частный
публичный
внутренний
защищенный
внутренний защищенный
Частный модификатор доступа.
Вернемся к примеру с домом. Охранник может охранять Ваш дом. Его обязанность - охранять вход в дом. Он не может зайти в дом и получить доступ ко всем вещам. Вы создаете SecurityGuardClass и называете переменную и метод для Security частным.
Общественный модификатор доступа.
Владельцы дома считаются общественными по отношению к классу. Они могут получить доступ ко всем классам, связанным с домом. Нет никаких ограничений на доступ к дому.
Защищенный модификатор доступа.
Только основной класс и производные классы могут иметь доступ к защищенным значениям переменных и методам. Например, служащие и гости – пример защищенного доступа. Служащие могут войти в любую комнату, прибраться там. Тем не менее, они имеют ограниченный доступ к дому, так как они не могут отдохнуть в постели хозяина дома.
Внутренний модификатор доступа.
Предел значения переменной или метода доступа существует в рамках проекта. Предположим, что в Вашем проекте существует более одного класса, и Вы объявили переменную в качестве внутреннего доступа в один класс. Посмотрите пример программы для внутренней переменной.
public class sampleInternalClass
{
internal String myInternal = "Iam Internal Variable";
}
class ShanuHouseClass
{
int noOfTV = 2;
public String yourTVName = "SAMSUNG";
public void myFirstMethod()
{
Console.WriteLine("You Have total " + noOfTV + "no of TV :");
Console.WriteLine("Your TV Name is :" + yourTVName);
}
static void Main(string[] args)
{
ShanuHouseClass objHouseOwner = new ShanuHouseClass();
objHouseOwner.myFirstMethod();
sampleInternalClass intObj = new sampleInternalClass();
Console.WriteLine("Internal Variable Example :" + intObj.myInternal);
Console.ReadLine();
}
}
Внутренний модификатор защиты.
Внутреннее защищенное значение переменной или метод имеет свои ограничения в рамках проекта класса или производного класса. Вот пример программы для внутренней защищенной переменной. В этом примере использован механизм наследования.
public class sampleProtectedInternalClass
{
protected internal String myprotectedInternal = "Iam Protected Internal Variable";
public void protectedInternalMethod()
{
Console.WriteLine("Protected Internal Variable Example :" + myprotectedInternal);
}
}
public class derivedClass : sampleProtectedInternalClass
{
public void derivedprotectedInternal()
{
Console.WriteLine("Derived Protected Internal Variable Example :" + myprotectedInternal);
}
}
class ShanuHouseClass
{
int noOfTV = 2;
public String yourTVName = "SAMSUNG";
public void myFirstMethod()
{
Console.WriteLine("You Have total " + noOfTV + "no of TV :");
Console.WriteLine("Your TV Name is :" + yourTVName);
}
static void Main(string[] args)
{
ShanuHouseClass objHouseOwner = new ShanuHouseClass();
objHouseOwner.myFirstMethod();
sampleProtectedInternalClass intObj = new sampleProtectedInternalClass();
intObj.protectedInternalMethod();
derivedClass proIntObj = new derivedClass();
proIntObj.derivedprotectedInternal();
Console.ReadLine();
}
}
6. Инкапсуляция
Инкапсуляция скрывает элементы или значения переменных за пределами класса. Вы помните, что охранник не имеет права заходить в дом, он не должен быть в курсе того, что происходит в доме. Таким образом, для большей безопасности владелец дома скроет все, что происходит внутри, от охранника. Скрытие и ограничение называют инкапсуляцией.
Например, у Вас есть два класса: первый называется "Houseclass" и другой – "houseSecurityClass".
Вы видите значения переменных, спрятанных в классе, где "houseSecurityClass" – общественный, а "Houseclass" может получить доступ, но "Houseclass" имеет как общественные, так и частные значения переменной, в которой частное значение переменной класса не может быть доступным за пределами класса.
public class houseSecurityClass
{
public int noofSecurity;
public String SecurityName = String.Empty;
}
public class Houseclass
{
private int noofLockerinHosue = 2;
public string OwnerName = String.Empty;
}
7. Абстракция
Абстракция показывает и делит общие данные с пользователем. Прислуга в доме может заходить во все комнаты и убираться там. Владелец дома может предоставить полные и частичные права слуге для доступа к его дому. Ниже приведен пример программы, в которой частные значения переменных и методов не согласуются со слугой, но общественная переменная и методы согласовываются.
public class HouseServerntClass
{
private int SaftyLoackerKeyNo = 10001;
public String roomCleanInstructions = "Clean All rooms";
private void saftyNos()
{
Console.WriteLine("My SaftyLoackerKeyNo is" + SaftyLoackerKeyNo);
}
public void roomCleanInstruction()
{
Console.WriteLine(roomCleanInstructions);
}
}
8. Наследование
Наследование (подражание) используется для повторного использования кода. В защищенном внутреннем модификаторе доступа Вы уже видели пример программы наследования. Подражание - это не что иное, как доступ и использование всех базовых классовых значений переменных и методов в производном классе. Подражание может быть любым из следующих.
Single level Inheritance: пример с одним базовым классом и одним производным
public class baseClass
{
private void privateMethod()
{
Console.WriteLine("private Method");
}
public void publicMethod()
{
Console.WriteLine("This Method Shared");
}
}
public class DerivedClass : baseClass
{
static void Main(string[] args)
{
DerivedClass obj = new DerivedClass();
obj.publicMethod();
Примечание: Базовый класс - высший класс, а производный класс - это класс (ы), который наследует базовый.
Наследование, где базовый класс - "GuestVist", а производный класс - "HouseOwnerClass".
В даном случае класс HouseOwnerClass наследует базовый класс GuestVist:
class GuestVist
{
public void Guestwelcomemessage()
{
Console.WriteLine("Welcome to our Home");
}
public void GuestName()
{
Console.WriteLine("Guest name is: Shanu");
}
}
class HouseOwnerClass : GuestVist
{
static void Main(string[] args)
{
HouseOwnerClass obj = new HouseOwnerClass();
obj.Guestwelcomemessage();
obj.GuestName();
Console.ReadLine();
}
}
Многозначное Наследование: рассмотрим пример с более чем одним производным классом. Первый базовый класс происходит с DerivedClass1, а затем DerivedClass1 возникает с DerivedClass2. Теперь с DerivedClass2 Вы можете получить доступ и к BaseClass, и DerivedClass1.
public class baseClass
{
private void privateMethod()
{
Console.WriteLine("private Method");
}
public void publicMethod()
{
Console.WriteLine("This Method Shared");
}
}
public class DerivedClass1 : baseClass
{
public void DerivedClass1()
{
Console.WriteLine("Derived Class 1");
}
}
public class DerivedClass2 : DerivedClass1
{
static void Main(string[] args)
{
DerivedClass2 obj = new DerivedClass2();
obj.publicMethod();
obj.DerivedClass1();
}
}
Множественное наследование:
Поддерживает ли .Net множественное наследование?
Ответ на этот вопрос - нет. В C # невозможно использовать множественное наследование класса.
Что такое множественное наследование?
Множественное наследование имеет только один класс, и Вы можете наследовать оба класса в производном классе.
Что произойдет, если ввести множественное наследование класса, используя C #?
Вернемся к примеру с домом. Производный класс "HouseOwnerClass" с двумя дополнительными классами "GuestVist" и "FriendsandRelationsClass".
Теперь предположим, что в Ваш дом пришел гость и друг. Для этого Вы вводите предыдущие три класса и наследуете два класса из Вашего производного класса.
Если ввести множественное наследование в C #, на экране отразится предупреждение "Ожидание интерфейса" во время процесса кодирования и выполнения программы.
9. Полиморфизм
Приставка «поли» означает больше, чем одна форма. В начале статьи в разделе выбор метода Вы уже видели пример полиморфизма. То же имя метода с другим параметром и есть примером полиморфизма.
В полиморфизме используетс метод перегрузки и замещения. Полиморфизм имеет два способа выполнения программы: полиморфизм времени компиляции (Compile Time Polymorphism) и времени работы полиморфизма (Run time Polymorphism).
Метод перегрузки.
Метод перегрузки – тот же метод, используемый для более чем одного метода с другими аргументами.
На примере ниже Вы видите, что имя метода «BedRoom» использовалось для двух методов, но параметры для каждого из них разные.
class HouseOwnerClass
{
public void BedRoom(String nameandColor)
{
Console.WriteLine(nameandColor);
}
public void BedRoom(String MemberName, String Color)
{
Console.WriteLine(MemberName + " Like " + Color + "Color");
}
static void Main(string[] args)
{
HouseOwnerClass objHouseOwner = new HouseOwnerClass();
objHouseOwner.BedRoom("My Name is Shanu I like Lavender color");
objHouseOwner.BedRoom("My Name is Afraz I like Light Blue color");
objHouseOwner.BedRoom("SHANU", "Lavender");
Console.ReadLine();
}
}
Метод замещения.
Разница между методом перезагрузки и замещения заключается в том, что при использовании метода перезагрузки Вы получите то же имя метода с другим аргументом.
В методе замещения Вы получите то же имя метода, его параметры и тип, но метод замещения применим только к производным классам. Метод замещения не используется в одном и том же классе.
Обратите внимание, как метод замещения можно использовать в абстрактном, виртуальном и недоступном методах.
10. Абстрактный класс/метод
Абстрактный класс: у абстрактного класса ключевое слово abstract.
abstract class GuestVist
{
}
Абстрактный класс – наивысший класс для всех классов. Объект не может получить доступ к абстрактному классу. Вы не сможете создать объект для абстрактного класса.
Что произойдет, если попробовать создать объект для абстрактного класса?
Пытаясь создать объект для абстрактного класса, на экране появится предупреждение об ошибке "экземпляр абстрактного класса не может быть создан".
Что произойдет, если создать абстрактный метод, который не будет замещен в производном классе?
На примере ниже показан абстрактный метод, который не замещен в производном классе. На экране высветилось предупреждение, которое гласит, что класс должен быть внедрен в абстрактный класс.
Вы видите абстрактный класс, который имеет обычный метод и абстрактный метод. У абстрактных методов нет содержания в абстрактном классе, поэтому Вы можете только объявить абстрактный метод в абстрактном классе. Должен быть как минимум один абстрактный метод в абстрактном классе.
abstract class GuestVist
{
public void Guestwelcomemessage()
{
Console.WriteLine("Welcome to our AbstractHome");
}
public void GuestName()
{
Console.WriteLine("Guest name is: Abstract");
}
public abstract void purposeofVisit();
}
public class Houseclass : GuestVist
{
static void Main(string[] args)
{
Houseclass objHouse = new Houseclass();
objHouse.Guestwelcomemessage();
}
public override void purposeofVisit()
{
Console.WriteLine("Abstract just came for a Meetup and spend some time ");
}
}
11. Виртуальный класс/метод
Виртуальный метод полезен для современного программирования.
Что такое виртуальный метод и какая от него польза?
Например, гость говорит, что сегодня еще 5 человек посетят Ваш дом. Для этого Вы пишете функцию для отображения сообщения, поскольку пять гостей посетят Ваш дом. После визита, Вы видите, что в общей сложности Ваш дом посетило 20 человек. Цифра может быть больше или меньше заявленной.
В таком случае, у гостей будет свой отдельный класс, и дом станет этим отдельным классом.
Разница между абстрактным и виртуальным методами
Оба метода используют ключевое слово override. Абстрактный метод может использоваться только в абстрактном классе. Это значит, что в абстрактном методе абстрактного класса нет основы. А в виртуальном методе есть.
На примере ниже показан абстрактный и виртуальный метод. В абстрактном классе, виртуальный метод отмечает пять гостей, но в программе производного класса количество было изменено на 20 гостей. Какой же будет результат в виртуальном методе? 5 или 20 гостей?
abstract class GuestVist
{
public abstract void purposeofVisit(); // Abstract Method
public virtual void NoofGuestwillvisit() // Virtual Method
{
Console.WriteLine("Total 5 Guest will Visit your Home");
}
}
class AbstractHouseClass : GuestVist
{
public override void purposeofVisit() // Abstract method Override
{
Console.WriteLine("Abstract just for a Meetup and spend some time ");
}
public override void NoofGuestwillvisit() // Virtual method override
{
Console.WriteLine("Total 20 Guest Visited our Home");
}
static void Main(string[] args)
{
AbstractHouseClass objHouse = new AbstractHouseClass();
objHouse.purposeofVisit();
objHouse.NoofGuestwillvisit();
Console.ReadLine();
}
}
Завершенная программа
abstract class GuestVist
{
public void Guestwelcomemessage()
{
Console.WriteLine("Welcome to our AbstractHome");
}
public void GuestName()
{
Console.WriteLine("Guest name is: Abstract");
}
public abstract void purposeofVisit(); // Abstract Method
public virtual void NoofGuestwillvisit() // Virtual Method
{
Console.WriteLine("Total 5 Guest will Visit your Home");
}
}
class AbstractHouseClass : GuestVist
{
public override void purposeofVisit() // Abstract method Override
{
Console.WriteLine("Abstract just for a Meetup and spend some time ");
}
public override void NoofGuestwillvisit() // Virtual method override
{
Console.WriteLine("Total 20 Guest Visited our Home");
}
static void Main(string[] args)
{
AbstractHouseClass objHouse = new AbstractHouseClass();
objHouse.Guestwelcomemessage();
objHouse.purposeofVisit();
objHouse.NoofGuestwillvisit();
Console.ReadLine();
}
}
12. Недоступный класс/метод
Недоступный класс: этот класс не может быть унаследован другими классами. Например, у владельца дома есть потайная комната, возможно, кабинет. Владелец не хочет, чтобы посторонние имели доступ к его кабинету. В таких случаях будет полезен недоступный класс. Недоступный класс вводится с помощью ключевого слова Sealed. Если класс объявлен Sealed, он не может быть унаследован другими производными классами.
Что произойдет, если Вы унаследуете надоступный класс в производном классе?
Рассмотрим пример ниже. Вы видите пример программы недоступного класса.
public sealed class OwnerofficialRoom
{
public void AllMyPersonalItems()
{
Console.WriteLine("All Items in this rooms are personal to me no one else can access or inherit me");
}
}
class HouseSealedClass
{
static void Main(string[] args)
{
OwnerofficialRoom obj = new OwnerofficialRoom();
obj.AllMyPersonalItems();
Console.ReadLine();
}
}
Недоступный метод: Если Вы объявили метод недоступным, то нельзя заместить определенный метод в производном классе. Давайте посмотрим Ваш класс дома, где есть базовый класс с виртуальным методом и виртуальным недоступным методом. Виртуальный метод может быть замещен в производном классе. Но виртуальный недоступный метод нельзя заместить в недоступном классе.
public class OwnerOfficialroomwithrestriction
{
public virtual void message()
{
Console.WriteLine("Every one belongs to this house can access my items in my room except my sealed Item");
}
public virtual sealed void myAccountsLoocker()
{
Console.WriteLine("This Loocker can not be inherited by other classes");
}
}
class HouseSealedClass : OwnerOfficialroomwithrestriction
{
public override void message()
{
Console.WriteLine("overrided in the derived class");
}
public override void myAccountsLoocker()
{
Console.WriteLine("The sealed method Overrides");
}
}
13. Статический класс/метод
Статический класс и недоступный класс нельзя унаследовать.
Разница между статическим и недоступным классами
Можно создать объект (пример) недоступного класса. В секции недоступного класса создать образец недоступного класса, а в главном методе создать объект для доступа к недоступному классу. В недоступном классе можно прописать статические и нестатические методы.
А для статического класса создать объект нельзя. В статическом классе допускаются только статические члены. То есть, в статическом классе нельзя прописать нестатические методы.
В принципе, основной метод – пример статического метода. Когда Вы создадите консольное приложение в C #, увидите, что каждый класс имеет основной метод по умолчанию. Когда консоль или приложение Windows начинают выполняться, первым выполняется основной метод. Нет необходимости создавать объект основного метода, так как он был объявлен, как статический метод.
В статическом классе память выделяется для всех статических переменных и методов во время выполнения, но для нестатических значений переменных и методов память выделяется только тогда, когда создается объект класса.
Что произойдет, если ввести нестатических метод в статический класс?
Вы увидите сообщение об ошибке: "Не удается создать экземпляр статического класса".
Как вызвать статический класс метода и значение переменной, не создавая объект.
Очень просто. Можно использовать "ClassName.Variable или Method Name", например, "OwnerofficialRoom.AllMyPersonalItems ();"
Смотрите следующий пример со статическим классом:
public static class OwnerofficialRoom
{
public static void AllMyPersonalItems()
{
Console.WriteLine("All Items in this rooms are personal to me no one else can access or inherit me");
}
}
class HouseStaticClass
{
static void Main(string[] args)
{
OwnerofficialRoom.AllMyPersonalItems();
Console.ReadLine();
}
}
Результат предыдущей программы показан ниже:
Можно ли создать статический метод в нестатическом классе?
Да, можно создать статический метод в нестатическом классе. Нет необходимости создавать объект для доступа статического метода (ов) в нестатическом классе. Можно непосредственно использовать имя класса для доступа к статическому методу.
Пример статического метода в нестатическом классе.
public class OwnerofficialRoom
{
public static void AllMyPersonalItems()
{
Console.WriteLine("No need to create object for me just use my class name to access me :)");
}
public void non_staticMethod()
{
Console.WriteLine("You need to create an Object to Access Me :(");
}
}
class StaticmethodClass
{
static void Main(string[] args)
{
OwnerofficialRoom.AllMyPersonalItems();
OwnerofficialRoom obj = new OwnerofficialRoom();
obj.non_staticMethod();
Console.ReadLine();
}
}
14. Интерфейс
Интерфейс похож на абстрактный класс, но в интерфейсе существует только имя метода. Однако, в абстрактном классе можно иметь метод объявления и определения. Методы интерфейса должны быть реализованы в примененном классе.
Смотрите следующий пример программы для интерфейса. Все методы интерфейса были реализованы в классе. Как уже было отмечено, С # не поддерживает множественное наследование. Чтобы получить множественное наследование, можно использовать интерфейс. Следующая программа – пример множественного наследования с использованием интерфейса.
interface GuestInterface
{
void GuestWelcomeMessage();
void NoofGuestes();
}
interface FriendsandRelationsInterface
{
void friendwelcomemessage();
void FriendName();
}
class HouseOwnerClass : GuestInterface, FriendsandRelationsInterface
{
public void GuestWelcomeMessage()
{
Console.WriteLine("All guests are well come to our home");
}
public void NoofGuestes()
{
Console.WriteLine("Total 15 Guestes has visited");
}
public void friendwelcomemessage()
{
Console.WriteLine("Welcome to our Home");
}
public void FriendName()
{
Console.WriteLine("Friend name is: Afraz");
}
static void Main(string[] args)
{
HouseOwnerClass obj = new HouseOwnerClass();
obj.GuestWelcomeMessage();
obj.NoofGuestes();
obj.friendwelcomemessage();
obj.FriendName();
Console.ReadLine();
}
}
Иногда необходимо иметь определенные методы, которые будут использоваться во многих производных классах. Каждый производный класс может выполнять различные функции для этих методов. В таких случаях можно использовать интерфейс.
Проведем аналогию с гостями, которые посещают Ваш дом. Предположим, для гостей разослали два типа сообщений: "Добро пожаловать" и "Вход для гостей запрещен". Функции являются общими, но разнятся для каждого владельца в одном и том же доме. Гость может быть гостем отца, матери, детей или всей семьи. У каждого гостя свое сообщение-приглашение, но функции те же, что в сообщении. Отец – это класс, мать – класс и дети – один класс. Оба сообщения для гостей «Добро пожаловать» и «Вход для гостей запрещен" – одинаковы для всех. В этом случае, можно создать интерфейс и объявить оба метода в интерфейсе. Классы отца, матери и детей могут наследовать интерфейс и вводить собственные детали метода.
Интерфейс похож на абстрактный класс, но главное отличие между абстрактным классом и интерфейсом в том, что в абстрактном классе есть абстрактный и неабстрактный методы. Но по умолчанию в интерфейсе все методы являются абстрактными. Поэтому в интерфейсе нет неабстрактного метода. Все методы, объявленные в интерфейсе, должны быть замещены в производном классе.
Что произойдет, если объявить неабстрактные методы в интерфейсе?
Вы увидете предупреждение "неожиданный модификатор" в модификаторе доступа и "неожиданное содержание метода" в тексте сообщения.
Пример программы для интерфейса:
interface GuestInterface
{
void GuestWelcomeMessage();
void NoofGuestes();
}
class HouseOwnerClass: GuestInterface
{
public void GuestWelcomeMessage()
{
Console.WriteLine("All guests are well come to our home");
}
public void NoofGuestes()
{
Console.WriteLine("Total 15 Guestes has visited");
}
static void Main(string[] args)
{
HouseOwnerClass obj = new HouseOwnerClass();
obj.GuestWelcomeMessage();
obj.NoofGuestes();
Console.ReadLine();
}
}
Источник: http://www.c-sharpcorner.com/UploadFile/asmabegam/basic-concept-of-oop-in-C-Sharp/
Властивість CSS font-family
Автор: Олександр Марченко
Введение
При создании веб-сайта немаловажную роль играют шрифты, с помощью их можно легко придать сайту узнаваемость, сделать его легко запоминающимся, ну и, конечно же, обеспечить хорошее восприятие текстов. Конечно, можно использовать давно проверенные, практически стандартные шрифты, но это отнимет у вашего сайта его стилистическое богатство и подчеркнет незавершенность авторской мысли.
Самым простым методом применения специфического шрифта является использование специального свойства font-family и задание ему значения с именем специфического шрифта при условии, что тот установлен на пользовательской машине. Напомним, что по умолчанию, т.е. на машине среднестатистического пользователя, на компьютерах с установленной ОС Windows в браузерах будет использоваться шрифт Times New Roman.
<head>
<title>title>
<style>
p {
font-family: 'Segoe UI';
}
style>
head>
<body>
Текст для сравнения
<p>Текст с заданными настройкамиp>
body>
В нашем случае добавление на странице любого количества элементов p, описывающих параграфы, сопровождалось бы присвоением определенного правила начертания шрифтов для их содержимого, в частности использование гарнитуры шрифта под названием Segoe UI. В случае, если у нашего пользователя данные шрифты отсутствуют на компьютере, текст отобразится с начертанием Times New Roman.
Разумеется, дабы избежать казусов с отображением специфических шрифтов, можно предположить вариант использования рисунков для отображения текста, этот метод самый простой, универсальный и безопасный, но и наиболее трудно поддерживаемый с точки зрения работы с контентом.
Правда, стоит отметить преимущества работы с текстом:
текст легко добавляется и настраивается (изменение размеров шрифта, межстрочных и межсимвольных расстояний, добавление эффектов тени, цветового оформления и т.д.);
текст лучше индексируется современными поисковыми системами;
текст можно скопировать в буфер, перевести на другой язык.
Что же делать, если необходимо отобразить текст со специфическим шрифтом, которого может попросту не быть на клиентской машине, и не хочется ограничиваться изображением? Ответ напрашивается сам за себя – загрузить файл со шрифтами непосредственно на пользовательский компьютер и оперировать с ним как с подключаемым модулем. Для этого используем правило @font-face, которое позволит определить дополнительные настройки шрифта и в случае необходимости (если данный шрифт не будет обнаружен на компьютере пользователя) загрузить его на клиентскую машину.
В итоге получим следующий результат:
<head>
<title>Font-facetitle>
<style>
@font-face {
font-family: heinrich;
src: url('heinrich.ttf'),
url('heinrich.eot');
}
/* После того как мы позаботились о доступности шрифта для пользователя,
можем смело приступить к его использованию. */
div {
font-family: heinrich;
font-size: 1.5em;
}
style>
head>
<body>
<div>Текст с заданными настройкамиdiv>
<p>Текст для сравненияp>
body>
Важным моментом использования подключаемых шрифтов является применение курсивного начертания для текста. Так, в случае если мы добавим тег , то получим следующую картину:
<div><i> Текст с заданными настройкамиi>div>
Помимо всего прочего у нас есть возможность подключить отдельный шрифт для использования тогда, когда мы хотим придать курсивное начертание тексту, в нашем случае это убудет иметь следующий вид:
<head>
<title>Font-facetitle>
<style type='text/css'>
/* Подключаем шрифт */
@font-face {
font-family: heinrich;
src: url('heinrich.ttf'), url('heinrich.eot');
}
/* Подключаем шрифт для задания курсивного начертания */
@font-face {
font-family: heinrich;
font-style: italic;
src: url('heinrichitalic.ttf'), url('heinrichitalic.eot');
}
/* Указываем, что все параграфы должны использовать подключенные шрифты */
p {
font-family: heinrich;
font-size: 1.5em;
}
style>
head>
<body>
<p>Для обычного текста будет использован уже знакомый шрифт heinrich.p>
<p><i>Для курсивного текста будет использован другой шрифт, а именно – heinrich italic.i>p>
<p>А это обычный текст с <i>"вставками"i> курсивного.p>
body>
Властивість CSS3 box-shadow
Автор: Валерія Прокопенко
Введение
С приходом CSS3 в мир веб-разработки множества модных новинок, отображать потрясающий анимационный эффект стало доступным с помощью нескольких строчек кода. Сегодня мы рассмотрим одно из свойств CSS3 box-shadow и с его помощью научимся создавать такой элемент управления, как кнопка. Особенностью такого подхода является то, что компоненты на странице выглядят объемными и привлекательными, чем обращают на себя внимание пользователя.
Для начала создадим 3 слоя, которые и будут выступать в роли наших кнопок и опишем для них стили:
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
width: 80px;
height: 80px;
margin: 30px;
display: inline-block;
cursor: pointer;
background: green;
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
В результате получим три зеленые кнопочки на фоне, который мы применили к телу нашего документа.
Теперь можно начать работу с box-shadow, но для начала познакомимся с его возможностями. Итак, данное свойство добавляет тень к нужному элементу, причем указав его параметры через запятую, можно применить несколько теней к одному компоненту и при их наложении первая в списке будет выше, а вторая ниже. Значение inset выводит тень внутрь элемента, но этот параметр не является обязательным.
Вооружившись знаниями о данном свойстве, можно приступить к созданию наших кнопок. Для начала изменим фон элементов на такой же, как у тела нашего документа. Теперь указываем параметры для box-shadow: первый отвечает за смешение по горизонтали, второй – по вертикали, третий - за радиус размытия, четвертый определяет цвет. Также используем значение inset, с помощью которого делаем внутреннюю верхнюю тень белой, а внутреннюю нижнюю - черной, при этом устанавливаем для них прозрачность, чтобы они не выглядели грубо.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
В результате мы получили объемные формы, теперь сымитируем эффект нажатия при наведении на кнопку, для этого используем псевдокласс :hover и в нем опишем внутренние тени элементов, причем верхняя должна быть черной, а нижняя – белой, и не забываем установить прозрачность для данных элементов.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
.button:hover {
box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
Следующее, что мы сделаем – это добавим иконки для наших кнопок, для этого мы используем псевдокласс :after и, чтобы усилить эффект вдавленности элемента при наведении, мы будем смещать картинки на 3% от начально положения.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
-moz-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
-webkit-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
.button:hover {
box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
}
.button::after {
content: '';
width: 80px;
height: 80px;
display: block;
opacity: 0.7;
}
.left::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-previous.png?itok=Myj2aYPA);
background-repeat: no-repeat;
background-position: 50%;
}
.center::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-play.png?itok=iQrN1tL3);
background-repeat: no-repeat;
background-position: 50%;
}
.right::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-next.png?itok=LBqF9Nod);
background-repeat: no-repeat;
background-position: 50%;
}
.button:hover::after {
background-position: center 53%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
Как видим, CSS3 делает жизнь разработчика намного проще, предоставляя множество интересных и простых в использовании плюшек.
Створення секундоміра за допомогою CSS3
Автор: Редакция ITVDN
Введение
В этой статье Вы научитесь создавать секундомер, используя HTML5 и CSS3. Мы рассмотрим CSS3 анимацию с тремя кнопками: старт, остановка и сброс. Запуск начинает работу секундомера, стоп – останавливает секундомер, и кнопка сброса сбрасывает секундомер.
Основная логика создания секундомера очень простая, Вы будете использовать простой контейнер div, содержащий цифры, они будут увеличиваться с помощью ключевого кадра анимации.
Сначала создайте div (содержащий числа) с помощью кода HTML:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="number">0 1 2 3 4 5 6 7 8 9div>
body>
html>
Вот результат предыдущего кода:
Теперь Вам нужно выровнять числа по вертикали за счет уменьшения ширины контейнера. Итак, создайте файл CSS (styles.css) и введите следующий код в этот CSS-файл.
* {
margin: 0;
padding: 0;
}
.numbers {
width: 10px;
}
Согласно предыдущему коду, Ваши цифры будут выровнены вертикально:
Теперь используем цифровые шрифты, Вы можете скачать их с сайта ds-digi.font. Используйте следующий код CSS, чтобы изменить шрифт:
.number {
width: 10px;
font-family: digital, arial, verdana;
font-size: 50px;
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Результат такого кода:
Давайте поместим числа в поле для отображения только одной цифры. Таким образом, в HTML-файле поместите div с цифрами в другой div. Код будет таким:
<div class="box">
<div class="number">0 1 2 3 4 5 6 7 8 9div>
div>
Теперь примените такие настройки CSS, чтобы отображать только одну цифру.
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
}
Таким будет результат:
Давайте создадим анимацию цифр, так как это главная задача статьи. Логика анимации – изменить значение top position absolute от 0 до -400 px, потому что высота поля 40 px, а у нас есть цифры от 0 до 9, то есть в общей сложности 10 цифр, так что 40 * 10 = 400, Вы будете менять верхнюю от 0 до -400 px. Вот так выглядит код файла style.css:
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
Вот каким будет результат:
Вы можете увидеть, что цифры заменяются, а не перемещаются вверх пиксель за пикселем. Теперь создайте еще несколько div: два для часов, два для минут, два для секунд и три для мили-секунд.
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
div>
body>
html>
Результат предыдущего кода:
Теперь установите float left для всех div, как указано ниже.
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
}
После применения float left мы получим такой результат:
Таким образом, максимальное значение минут и секунд будет 60. Вы должны создать две анимации, одна из которых будет 10-шаговой и 10-цифровой, и одна 6-шаговой, и только 6-цифровой. Используйте следующий код CSS для этого:
* {
margin: 0;
padding: 0;
}
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
}
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Теперь, после создания предыдущих анимаций, примените класс CSS к HTML следующим образом:
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
Таким будет результат:
Теперь Вам нужно синхронизировать скорость анимации со скоростью времени. Примените следующие свойства:
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
Вот таким будет результат:
Вы можете увидеть, что сейчас с секундомером все в порядке. Теперь добавьте стили к секундомеру. Модифицируйте HTML и CSS.
HTML-файл:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="MainContainer">
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
div>
body>
html>
CSS-файл:
* {
margin: 0;
padding: 0;
}
body {
background: url(images.jpg);
}
.MainContainer {
padding: 200px;
text-align: center;
}
.stopwatch {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #eeeeee;
border-radius: 20px;
box;
}
.box {
width: 40px;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
}
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.onesPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
После применения некоторых стилей результат будет следующим:
Теперь добавьте 3 кнопки типа radio для запуска, остановки и сброса секундомера. Эти кнопки будут управлять секундомером.
HTML-код:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="MainContainer">
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
<div id="stopwatch_controls">
<label for="start">Startlabel>
<label for="stop">Stoplabel>
<label for="reset">Resetlabel>
div>
div>
body>
html>
Теперь измените код CSS для стилизации элементов управления секундомером:
* {
margin: 0;
padding: 0;
}
body {
background: url(images.jpg);
}
.MainContainer {
padding: 200px;
text-align: center;
}
.stopwatch {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #eeeeee;
border-radius: 20px;
box;
}
.box {
width: 40px;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
#stopwatch_controls label {
cursor: pointer;
padding: 5px 10px;
background: #eeeeee;
font-family: arial, verdana, tahoma;
font-size: 20px;
border-radius: 0 0 3px 3px;
}
input[name="controls"] {
display: none;
}
#stop:checked ~ .stopwatch .number {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#start:checked ~ .stopwatch .number {
animation-play-state: running;
-webkit-animation-play-state: running;
}
#reset:checked ~ .stopwatch .number {
animation: none;
-webkit-animation: none;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
/*By default animation will be paused*/
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
/*By default animation will be paused*/
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.onesPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Финальный результат
Источник: http://www.c-sharpcorner.com/UploadFile/75a48f/stopwatch-using-css3/
CSS vs JavaScript: руйнуємо міфи
Автор: Редакция ITVDN
Введение
Многие разработчики заблуждаются, считая, что CSS – единственный способ работы с анимацией в WEB. CSS становится все более и более популярным, он считается самым надежным и удобным инструментом создания анимаций. Но это не означает, что он лучше, чем JavaScript.
В этой статье мы расскажем, почему лучше использовать JavaScript, а не CSS, а также разоблачим мифы, связанные с CSS.
1. JQuery
JavaScript и JQuery ошибочно объединяют. Анимации, разработанные с JavaScript – быстрые и динамичные, тогда как анимации JQuery – медленные. Причина в том, что несмотря на его мощные инструменты, JQuery не был создан для анимации.
2. Отсутствие управления вращением и позиционированием
Для выполнения анимации необходимо использовать элементы управления вращением и определением позиции. В CSS все эти функции содержатся в свойстве «transform». Это создает проблемы для уникальной анимации чего-либо через один общий элемент. Например, анимирование «rotation» и «scale» отдельно, с разными таймингами, возможно только с JavaScript, потому что он позволяет использовать различные функции, не поддерживаемые CSS. CSS удобно использовать только для простой анимации.
3. Производительность с Velocity и GSAP
Velocity и GSAP – наиболее популярные библиотеки JavaScript. Они работают без JQuery. Нет уменьшения производительности, так как эти библиотеки работают за пределами основных анимаций JQuery.
Velocity и GSAP можно применять даже, когда jQuery не используется на странице.
* Работа без JQuery * /
Velocity(element, { opacity: 0.4 }, 900); // Velocity
TweenMax.to(element, 1, { opacity: 0.4 }); // GSAP
В приведенном выше примере Вы видете, что velocity использует тот же синтаксис, даже когда JQuery не применяется. Он просто смещает все элементы в правильном направлении, чтобы создать пространство для целевых элементов.
4. GPU-фактор
Полностью оптимизированный код с GPU отлично подходит для выполнения различных задач, включая преобразование матриц и изменение прозрачности, поэтому все ведущие браузеры сначала перенаправляют такие задачи от CPU к GPU. Нужно разделять все анимационные элементы на разные слои GPU. Таким образом мы избавимся от необходимости вычислять каждый пиксель в каждой минуте. Можно сэкономить много времени, просто перемещая один пиксель за другой.
Обратите внимание: нет необходимости делать собственный слой для каждого элемента из-за ограничения видеопамяти GPU.
5. Быстрые анимации JavaScript
JavaScript обходит CSS в производительности и скорости. JavaScript достаточно универсальный, чтобы создать впечатляющую 3D демо-анимацию, которую Вы можете увидеть через WebGL. Он достаточно быстрый, чтобы построить мультимедийный тизер, разработанный с использованием Flash, или After Effects. С JavaScript это легко сделать с помощью canvas.
Вывод
Данная статья доказывает, что анимация JavaScript более быстрая, по сравнению с анимацией CSS. Но это не означает, что CSS не стоит использовать. Он хорошо подходит для простой анимации, но если Вы хотите сделать анимацию более гибкой, Вам лучше использовать JavaScript.
Источник: http://www.script-tutorials.com/css-vs-javascript-myths-fall-to-pieces/
Посібник новачка з HTML5 & CSS3 – об'ємні форми в HTML5
Автор: Редакция ITVDN
Введение
К сожалению, от бумажных форм не скрыться даже сегодня. Разумеется, когда появились web-формы, распространение бумажных сбавило свой былой темп. В наше время, когда нужно зарегистрироваться в системе, необходимо просто посетить соответствующий веб-сайт и заполнить веб-форму через браузер. У такой веб-формы будет кнопка в нижней части экрана, для сиюминутной передачи информации нужно всего лишь щелкнуть по ней. Веб-форма – это в первую очередь удобный и быстрый способ передать серверу информацию пользователя для обработки. Веб-формы прежде всего были придуманы, чтобы избавиться от неудобств предшественников – бумажных форм. А также для простоты обмена информациtq в социальных сетях и для удобств электронной коммерции: например, легко можно осуществлять электронную оплату.
Нет сомнений, на сегодняшний день веб-формы – необходимая часть любого веб-сайта. По существу, данная форма – это HTML-документ, состоящий из различных элементов и атрибутов. Теперь рассмотрим создание HTML5 форм.
Прочитав эту статью, Вы научитесь создавать объёмную форму с помощью HTML5.
Основы создания формы
index.html – HTML-файл (показанный ниже). В него Вы добавите HTML-код, чтобы создать форму. Читая эту статью, Вы будете добавлять код между закомментированными тегами start и end.
<!DOCTYPE html>
<html>
<head>
<title>Formidable Form with HTML5title>
head>
<body>
<div class="container">
<header>
<h1>Formidable Form with HTML5h1>
header>
<div class="form">
div>
div>
body>
html>
Приступайте к работе с HTML формой
HTML форма – основа многих веб-форм, известных на сегодняшний день. Она может содержать следующие элементы ввода данных:
1. Текстовые поля, поля пароля, checkbox, radio buttons и кнопки submit.
2. Текстовая область и выпадающие списки.
Они вместе предоставляют средства управления UI, чтобы ввести и отправить информацию на сервер. Кроме того, форма может содержать элементы fieldset, legend и label.
В любом текстовом редакторе откройте файл index.html и добавьте HTML-код, между тегами и . Как только это сделаете, сохраните файл и откройте его в браузере – и увидите результат.
Как продемонстрировано, код для формы мы включаем между тегами и .
имеет три атрибута:
Id. Содержит значения – к примеру, particularsform – используемые для ссылки на HTML-элемент в JavaScript и CSS.
Action. Содержит URL веб-страницы – данные формы будут отправлены на него после ввода.
Method. Присваивает значение «get» в данном примере. Метод get передаст данные формы на страницу получения, добавляя их в виде пар имя-значение в URL-страницы. В данном атрибуте иногда ещё используется метод post.
Тег – самый важный в элемент HTML-форме. Он определяет поле ввода в теге.
<input type="submit"> определяет кнопку отправки. Когда пользователь нажимает эту кнопку, она отправляет данные формы в файл, определенный в атрибуте «action». Добавьте выделенный код в index.html. Это выведет на экран кнопку отправки с заголовком «Sign up». Заголовок «Sign up» присвоен через значение атрибута.
Введите любые значения в текстовые поля имени и адреса электронной почты соответственно, щелкните по кнопке «Sign up» и наблюдайте.
Значения, введенные в соответствующие текстовые поля вместе с их соответствующими именами, были бы отправлены в acknowledge.html, значение атрибута action тега
. В данном примере acknowledge.html просто выведет в браузере на экран данные, полученные от index.html.
Обратите внимание на строку поиска. Вы видете, что имя, электронная почта, и кнопка отправки были добавлены к URL acknowledge.html как пары значение-имя таким образом:
Это то, как данные передаются к странице получения, когда в теге определяется значение get.
maxlength
Вы можете добавить атрибут maxlength к элементу , чтобы ограничить вводимое пользователем количество символов.
<input maxlength="10">
Тег <input type="password"> определяет поле пароля. Это текстовое поле, символы в котором замаскированы в форме звездочек или кругов.
Добавьте выделенный код в index.html. Это создаст два поля пароля. Когда Вы введете текст в эти поля, Вы увидите, что каждый символ был превращен или в звездочку, или в круг.
Тег <input type="radio"> – тег-переключатель. Переключателей обычно как минимум два и они находятся в группах, используют одинаковое значение для их атрибутов name, но различное значение для их атрибутов value. Пользователь может выбрать только один из них в группе.
Добавьте выделенный код в index.html. Это создаст два переключателя для выбора пола. Эти переключатели используют одинаковое название "Gender", который идентифицирует их как группу, и только один пол может быть выбран в этой группе. Если Вы измените одно из названий на другое значение, Вы нарушите это правило, и обе кнопки могут быть выбраны одновременно. Но, конечно, это не имеет никакого смысла для выбора пола.
and
Тег
используется, чтобы сгруппировать связанные элементы в форме, создавая рамки вокруг них. Тег используется, чтобы определить заголовок для этой рамки.
Давайте изменим код выделенной области. Это образует рамки вокруг этих 2 переключателей для выбора пола с заголовком "Gender".
Тег <input type="checkbox"> создает область с флажком, чтобы пользователь мог выбрать или отменять опцию. Как в случае с переключателями, флажки обычно находятся в группах. Но в отличие от переключателей, пользователь может выбрать больше, чем одну строку с флажком.
Добавьте выделенный код в index.html. Это создаст шесть переключателей для выбора хобби. Эти переключатели используют одинаковое название "hobbies", идентифицирующее их как группу.
Тег <input type="file"> определяет кнопку загрузки для пользователей, чтобы выбрать и загрузить файл.
Добавьте выделенный код в index.html. Это создаст кнопку загрузки, где пользователь может щелкнуть, чтобы выбрать файл и загрузить его.
Таким образом можно без проблем создать свою форму с помощью HTML5.
Источник: http://www.codeproject.com/Articles/761123/Beginners-Guide-to-HTML-CSS-Formidable-Forms-with
Конвертування PDF у текст у C#
Автор: Редакция ITVDN
Как интерпретировать PDF-файлы
Существует несколько основных методов извлечения текста из PDF файлов в .NET:
Microsoft IFilter interface и Adobe IFilter implementation;
iTextSharp;
PDFBox.
Эти методы PDF-интерпретации неидеальны. Ниже подробно рассмотрим каждый из них.
Разбор PDF с помощью Adobe PDF IFilter
Для того, чтобы разобрать PDF-файлы с помощью IFilter, Вам понадобится:
Adobe Acrobat или Reader 7.0.5+ (или автономный Adobe PDF IFilter);
IFilter COM wrapper class.
Пример кода:
using IFilter;
// ...
public static string ExtractTextFromPdf(string path) {
return DefaultParser.Extract(path);
}
Загружаем пример проекта:
Интерпретация PDF-файлов, используя IFilter
Если Вы используете PDF IFilter, работующий с Adobe Acrobat Reader, Вам нужно переименовать процесс "filtdump.exe", иначе интерфейс IFilter вернёт код ошибки E_NOTIMPL. Детально смотрите на Parsing PDF Files using IFilter.
Недостатки:
1. Использование ненадежного COM Interop. Он обрабатывает интерфейс IFilter (сочетание IFilter COM и Adobe PDF IFilter может быть проблематичным).
2. Раздельная установка Adobe IFilter на целевой системе. Неудобно распространять индексное решение другим пользователям.
3. Нужно использовать имя файла "filtdump.exe" для Вашего приложения с последним PDF IFilter, прилагающимся к Acrobat Reader.
2. Разбор PDF с помощью iTextSharp
iTextSharp – .NET порт iText, PDF библиотеки для Java. Его основная функция – создание, а не чтение PDF-файлов, но он также позволяет извлекать текст из PDF-файлов.
Пример кода:
using iTextSharp.text.pdf;
using iTextSharp.text.pdf.parser;
// ...
public static string ExtractTextFromPdf(string path)
{
using (PdfReader reader = new PdfReader(path))
{
StringBuilder text = new StringBuilder();
for (int i = 1; i <= reader.NumberOfPages; i++)
{
text.Append(PdfTextExtractor.GetTextFromPage(reader, i));
}
return text.ToString();
}
}
Загружаем пример проекта:
Интерпретация PDF-файлов с iTextSharp
Вы можете использовать LocationTextExtractionStrategy, чтобы получить более высокую точность.
public static string ExtractTextFromPdf(string path)
{
ITextExtractionStrategy its = new iTextSharp.text.pdf.parser.LocationTextExtractionStrategy();
using (PdfReader reader = new PdfReader(path))
{
StringBuilder text = new StringBuilder();
for (int i = 1; i <= reader.NumberOfPages; i++)
{
string thePage = PdfTextExtractor.GetTextFromPage(reader, i, its);
string[] theLines = thePage.Split('\n');
foreach(var theLine in theLines)
{
text.AppendLine(theLine);
}
}
return text.ToString();
}
}
Недостатки iTextSharp:
Лицензирование, если Вы недовольны AGPL лицензией.
3. Разбор PDF с помощью PDFBox
PDFBox – другая Java PDF библиотека. Она может использоваться с оригинальной Java Lucene (LucenePDFDocument).
К счастью, существует .NET версия PDFBox, созданная с помощью IKVM.NET (загрузите PDFBox package).
Для использования PDFBox в .NET требуется:
1. Добавление ссылок:
IKVM.OpenJDK.Core.dll
IKVM.OpenJDK.SwingAWT.dll
pdfbox-1.8.7.dll
2. Копирование таких файлов каталога Bin:
commons-logging.dll
fontbox-1.8.7.dll
IKVM.OpenJDK.Text.dll
IKVM.OpenJDK.Util.dll
IKVM.Runtime.dll
Использование PDFBox для разбора файлов PDF достаточно простое:
using org.apache.pdfbox.pdmodel;
using org.apache.pdfbox.util;
// ...
private static string ExtractTextFromPdf(string path)
{
PDDocument doc = null;
try {
doc = PDDocument.load(path)
PDFTextStripper stripper = new PDFTextStripper();
return stripper.getText(doc);
}
finally {
if (doc != null) {
doc.close();
}
}
}
Загружаем пример проекта:
Как конвертировать PDF в текст в C# (.NET)
Как конвертировать PDF в текст VB (.NET)
Размер требуемой сборки составит почти 18 Мбайт:
IKVM.OpenJDK.Core.dll (4 MB)
IKVM.OpenJDK.SwingAWT.dll (6 MB)
pdfbox-1.8.7.dll (4 MB)
commons-logging.dll (82 kB)
fontbox-1.8.7.dll (180 kB)
IKVM.OpenJDK.Text.dll (800 kB)
IKVM.OpenJDK.Util.dll (2 MB)
IKVM.Runtime.dll (1 MB)
Недостатки:
1. IKVM.NET Dependencies (18 MB).
2. Скорость (особенно скорость IKVM.NET).
Источник: http://www.codeproject.com/Articles/12445/Converting-PDF-to-Text-in-C
3D-перетворення за допомогою CSS3
Автор: Олександр Марченко
Введение
Продолжая серию статей о реализации анимации, которая реализуется без знаний Javascript, стоит отметить, что использование 2D зачастую не производит на пользователя должного впечатления. Несомненно, 2D-преобразования, реализованные с использованием каскадных таблиц стилей CSS3, освобождают нас от написания нескольких строк JavaScript кода, и тем более от подключения разного рода фреймворков. Но нельзя того же сказать и про 3D-преобразования, которые также реализуются без скриптов, но в то же время обеспечивают ощущение объемности объектов на странице, придавая им 3-х мерности. К тому же, на сегодняшний день большинство браузеров актуальных версий поддерживают эти эффекты.
Перед тем, как приступить к практическим примерам, стоит лишний раз упомянуть о перспективе, поскольку она является ключевой составляющей, когда дело доходит до 3D-эффектов. Дело в том, что, благодаря стереоскопическому зрению, человек способен различать и воспринимать формы, размеры и расстояние до предметов. Поэтому для изображения объемных тел на плоскости, с учетом их пространственной структуры и отдаленности некоторых частей от зрителя, и приняли специальную технику изображения, названную перспективой. Иначе говоря, если в правильной мере обеспечить изобразительное искажения пропорций и форм реальных тел, можно достичь реалистичного объемного изображения. Самым простым примером могут быть две прямые, которые идут от пользователя и сходятся в так называемой точке схода – подобный эффект Вы наблюдаете, когда смотрите на рельсы, которые удаляясь от Вас к горизонту, сходятся в одну точку.
Так, используя свойство transform вместе с функциональной аннотацией perspective, можно добиться объемности визуального эффекта.
<head>
<title>title>
<style>
div {
width: 400px;
height: 400px;
margin: 100px;
float:left;
background-color: ActiveCaption;
}
#clear:hover {
transform: rotateY(45deg);
transition: 3s;
}
#perspective:hover {
transform: perspective(500px) rotateY(45deg);
transition: 3s;
}
style>
head>
<body>
<div id="clear">div>
<div id="perspective">div>
body>
Кроме того, стоит помнить, что вы можете комбинировать направления поворотов, обеспечивая своего рода несколько степеней свободы.
<head>
<title>title>
<style>
#id1 {
margin: 100px;
transition: 3s;
}
#id1:hover {
transform: rotateY(45deg) rotateX(45deg);
transition: 3s;
}
#id2 {
margin: 100px auto;
transition: 3s;
}
#id2:hover {
transform: perspective(400px) rotateY(45deg) rotateX(45deg);
transition: 3s;
}
style>
head>
<body>
<img id="id1" src="cloud.png" />
<img id="id2" src="cloud.png" />
body>
С помощью несложных манипуляций вы сможете достичь интересных эффектов:
<head>
<title>title>
<style>
#overlay {
margin: 100px auto;
width: 150px;
height: 150px;
background: gold;
border-radius: 100%;
border: 10px double #794103;
box-shadow: 0 0 15px #808080;
}
#overlay:hover {
background: #794103;
border: 10px double gold;
}
#overlay:hover #inner {
width: 130px;
height: 130px;
border-radius: 100%;
background-color: #794103;
border: 3px dashed gold;
transform: rotateX( 180deg );
}
#inner {
width: 130px;
height: 130px;
margin: 7px;
border-radius: 100%;
background-color: gold;
border: 3px dashed #794103;
transition: all 1s ease-out;
}
style>
head>
<body>
<div id="overlay">
<div id="inner">div>
div>
body>
Трехмерные переходы, безусловно, изменят правила игры и дадут нам, веб-разработчикам, несомненно, лучшие возможности делать плавную анимацию, не прибегая к Flash. В этой статье мы познакомились лишь с частью возможностей Transform Properties. Сами по себе они не могут служить универсальным решением, но, когда мы начинаем трансформировать элементы вокруг с помощью свойства transition, начинается самое интересное. Но с этим свойством мы детальней познакомимся с следующей статье.