Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Articles Tagged ‘css’

Useful CSS snippets

Saturday, December 22nd, 2018 by Servage
cssStylessheets define the visual appearance of your website. Technically speaking the stylesheets include instructions on sizing, position, color and all other aspects of the DOM elements' display. Nowadays there are frameworks to make the process of defining your stylesheets easier. Usually the work is still done by hand in text editors and sometimes aided by tools, color pickers etc. Also stylesheets have transformed from being mere CSS to the smarter and more intelligent systems SASS and LESS, which allow for a programmatic approach to writing stylesheets. The later two languages allow you to define variables and use them in calculations you can perform in your stylesheet. Also code blocks allow for ...

Intelligent and super simple HTML5 slider

Saturday, December 8th, 2018 by Servage
super-simple-sliderAs it says on the official Super Simple Slider website, there are already many sliders out there. However, there is something special about Super Simple Slider. As the name suggests, it is super simple to set up and it supports all types of content from images to divs and text. It also includes other useful features that we are going to describe in this article. Installation part one: Downloading the required files To add the slider to your website, you should first go to the official www.supersimpleslider.com website and download the files to your project folder. There are three files and one folder you need: An images folder, jQuery, a stylesheet file and ...

Use pre-made CSS animations with Animate.css

Sunday, November 25th, 2018 by Servage
animate-cssAnimate.css is a CSS library that allows you to animate elements on a web page. It is very easy to set up and provides dozens of premade animations for you to use, such as bouncing, sliding and fading animations. Another great thing about Animate.css is that it does not use any JavaScript for animations. Everything is done with CSS in a single file. Setting Up Animate.css As promised above, setting up Animate.css is simple. You only need to include one CSS file that you can find on the official website: https://daneden.github.io/animate.css. Click the download link, save the file and include it in your HTML file using a <link> tag. Here is an example: ...

What is object-oriented CSS?

Sunday, November 11th, 2018 by Servage
css3Object-oriented programming is a common practice in many programming languages. It helps you with the DRY principle (don’t repeat yourself) by allowing you to repeatedly use code from a single code base. How would applying the paradigm work with something other than a programming language, like CSS? Let’s find out how CSS can be written in the same way and what are the benefits of doing so. The Two Principles of OOCSS Object-oriented CSS (OOCSS) is built upon two main principles. Firstly, content should be separated from containers. If content and its container are not tied to each other too closely, it allows you to reuse the containers for different types of content ...

Build A Toolkit To Help Define Your Web Design Style

Sunday, November 4th, 2018 by Servage
In order to get good conversion rates and positive user experiences, user interface design is vital. Let’s take a look at some practical ideas to do that. Single Column Layout The first consideration in user interface (UI) is the page layout. In our previous web era, we were free to try various options for layout and among them, multi-column approach was common, since we then wanted to use screen space at a maximum level. Now, with mobile web, we are restricted to single column layout since panning on hand held devices is not advisable, along with the scrolling involved. With finger gestures, a visitor feels a natural ease and ...

Conditional stylesheets with CSS3 media queries

Tuesday, October 23rd, 2018 by Servage
css-media-queriesMedia queries is a powerful feature used to selectively apply CSS styles to a document based on certain conditions. The most common conditions are screen height and width, and these conditions are often used to create responsive websites. These days, it is crucial to understand how media queries work to create modern websites. The @media rule A media query is created by using the @media rule inside a regular CSS style sheet. @media is followed by the rules that apply to the media query. If these requirements are met, all styles inside the media query will be applied to the web page. Here is an example of what a media query can look ...

Speed up your website – Part 3: CSS

Monday, July 9th, 2018 by Servage
This is the third part of a simplified explanation of the "Yahoo best practices for speeding up your web site". Read the second part here. The third part is about CSS related optimization. Include stylesheets in the head section Use the <link> tags in the <head> section of your HTML code to include CSS files. This enables your website to load progressively, instead of waiting for style information in the middle, or at the bottom of your page. It means that content can be rendered when it is ready, because the style information has already been loaded in the beginning. This makes the page appear to load faster. Do not ...

Collection of CSS techniques

Monday, June 11th, 2018 by Servage
I've stumbled over a great list of cool CSS techniques I think could be useful some web developers: "CSS3 is taking web development and web design to a higher level. In this article, I have compiled examples of amazing CSS3 techniques that will probably become very popular when CSS3 will be fully supported by most browsers." Color animate any shape with CSS3 and a PNG Let’s start this compilation with an interesting effect created using only CSS3: A png image with a changing background. The background is using CSS3 transitions. Not the kind of effect you’ll put on your website, but definitely an interesting demo of what CSS3 can do. View source: http://jsfiddle.net/chriscoyier/vhKhT/ Create adaptable layout using ...

Create nicer looking forms with CSS

Monday, May 28th, 2018 by Servage
Forms are one of the commonly used elements in HTML. It's a basic functionality for most websites to capture specific information via user input through HTML forms. So why do so many forms look really boring? Why are businesses still missing out on new customers because of unappealing order forms? It's amazing what you can accomplish with form design. It looks good, gives a serious impression, and attracts users. Examples The images illustrating this article are two examples of beautiful order forms I've found online. They are integrated with the rest of the website design, they have a simple layout, there isn't too much data to be added. Users are unlikely ...

Blueprint CSS Framework makes CSS styling easy

Monday, May 21st, 2018 by Servage
The last post about nicer forms introduced some simple CSS tricks to get nice looking forms. It also mentioned the Blueprint CSS framework, which is pretty nice. Blueprint is basically just a set of stylesheets (.css files) that you can include in your website to get certain default design and layout functionality. Why is this great? You often want to do similar things with your web projects in terms of design. Blueprint offers help with exactly that. It makes your standard pages look good, and gives you a great starting point for further customization. It's much better than using the various browsers' own default styling. The features CSS reset of styles to ...