The Secrets of Semantic HTML5 for Document Structure
Look at the graph given above, and you can quickly see how extensively HTML 5 is growing popularity. The Semantic HTML 5 has almost replaced the HTML. Now, we are…
Articles tagged HTML/CSS
Creating a slider using Twitter Bootstrap 3
Bootstrap slider. Twitter Bootstrap 3 is one of the best CSS frameworks to develop and design content management systems. With Bootstrap you can easily create blogs or pages of the portfolio using a system of grids Twitter Bootstrap (grid layout). At the heart of many CMS systems we usually have a base component “Slider” (Carousel), basically – it auto-sequential display of images, but it can be whatever you like: it can display the latest completed projects, reviews of your customers, description of special offers, links to news or latest articles from your blog. In this article, we will explore how to create a slider using Twitter Bootstrap 3 Carousel component.
Bootstrap one-page template with Parallax effect
Bootstrap one-page template with Parallax effect
Bootstrap tutorial / parallax scrolling tutorial. It is no secret that the bootstrap is used on many websites now. This allows to save time and create excellent results in a short period of time. In particular it concerns the markup and styles. Last time, when we wrote about the bootstrap, we received many positive comments, so I decided to prepare another lesson on using this framework today. In order to make it more interesting, we’ll create the demonstration with one of the interesting effects – Parallax. We will see the use of different backgrounds when scrolling the page. In order to understand what we intend to do – please have a look at the demo.
Polaroid gallery
Polaroid – we did not talk about photo galleries for a while, however enough time has already passed and here could be new galleries. Not so long ago, I stumbled on a new jquery plugin gallery, which builds the photos in a stack of Polaroid pictures. It seemed to me it was fun and can please you, because gallery has a very user-friendly and intuitive interface. Implementing it for a ‘stack’ of your photos is not difficult. Today we look at the whole process.
Single Page Application with AngularJS
AngularJS is a dynamically developing framework for building dynamic web applications. As framework, it provides many functions out of the box. To start with, in our tutorial we will show you how to build a basic single page application. It will help you understand main concepts of working with the AngularJS, and next time you will be able to create more complex projects.
Page layout with Bootstrap 3 part 2
Last week we started the new page layout with Bootstrap 3, today we are going to finish it. Today we consider creation of the following elements: sidebar, quotation, main content, ‘our team’ block, footer, twitter feed, site map and social buttons. As usual, we will add them step by step, stylizing our elements.
Pure CSS3 LavaLamp Menu
I think that you have already seen various animated menus with LavaLamp effect (based on jQuery plugin). Today I would like to tell you how to repeat the same behavior only with CSS3 (without any javascript). I had to use CSS3 transitions in our menu (to animate elements). So, if you are ready, let’s start.
(more…)Page layout with Bootstrap 3
Dear readers, today we continue our Bootstrap 3 lessons, and for this lesson I prepared a new page layout that would suit different purposes. The huge advantage of using CSS frameworks is that the developer does not need to think about different issues of the layout, most of which were solved by creators of frameworks. For instance: cross-browser compatibility, support for different screen resolutions (responsiveness) and so on. The developer only needs to indicates what to display and when to display (depending on conditions), the rest the framework does itself. This approach can greatly accelerate the layout of the site. Another advantage of Bootstrap is its popularity. This means that another developer will be easier maintain your code.
Line Icons
Today there are many kinds of icons namely flat Icons, line icons and solid icons which are based on their usage by web or application developer. The kind of icons constant used by developers is no other than line icons. We are showcasing this article basically let you know the thousands of the good line icons.
jQuery Mobile Lesson 1
In a new series of articles, we will talk about jQuery Mobile framework, which easily allows you to create responsive mobile websites.
(more…)