Servage Magazine

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

Articles Tagged ‘css’

Create a cool CSS-based tab-menu

Friday, December 6th, 2019 by Helge
This time we showtabmenu how to create a nice-looking tab-menu, based purely on HTML and CSS. See a live tabmenu example here. First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-) <ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> <li><a href="">Contact</a></li> <li><a href="">Login</a></li> </ul> So far this is somewhat similar to the dropdown menu, except we don’t have sub-items. This tab-menu and the dropdown ...

Is your website standard compliant?

Saturday, October 12th, 2019 by Servage
wc3Everyone who ever tried creating a website probably knows that annoying experience of HTML pages not being displayed the same way in every browser. Especially  older versions of browsers are having a hard time showing your site the way you intended it to look. The reason for this is browsers interpreting HTML code and CSS styles differently. In many cases this has lead developers to create workarounds, including the use of invalid HTML or CSS, to trick the browsers into displaying the content in a similar way. These issues are frequently discussed on the Internet, and a common interpretation of HTML and CSS across all browsers is unfortunately not in sight. However, there is ...

CSS sprites are cool and useful

Thursday, May 2nd, 2019 by Servage
  How CSS Sprites Work There is an interesting story about Vilfredo Pareto, an economist who made an observation on the wealth of most of the nations in UN and found that 80% of the wealth of a nation is in the hand of 20% of the people in that country. This became famous as the 80/20 rule in the economic world there after. In our computing world especially in case of web development and web developers who are focusing on performance optimization technique this same rule is working for the code. There are only 20% codes, which are consuming 80% time of the client-server interactions. This is particularly true for http requests. Us web programmers are ...

More with CSS Visual effects

Saturday, April 20th, 2019 by Servage
transforms Transform Values: transform function(s) | none Default: none Applies to: transformable elements (see sidebar) Inherits: no This article focuses on the more straightforward 2-D varieties because they have more practical uses. Transforms are supported on all major browser versions with vendor prefixes. They are not supported at all on IE8 and earlier, Firefox 3 and earlier, and Opera 10.1 and earlier. You can apply a transform to the normal state of an element and it will appear in its transformed state when the page loads. Just be sure that the page is still usable on browsers that don’t support transforms. It is common to pull out the transforms only when users interact with the element via a ...

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 ...