You are here: |Blog|Css|Css Text Fading Effect

CSS text fading effect

CSS

The fading-text effect is a handy solution when we have a text that doesn't fit a given container. In this case, we want to fit as much text necessary to fill the container, and also to apply a fade-out effect in the bottom -just before the end of the containing div.
It's something like "our Services" part on our Homepage, where there are three fixed-size divs, which get their contents from other webpages and -due to aesthetical reasons- these contents should remain contained neatly within these divs.

Lets start by creating the HTML environment:

<div class="cont">
  <div class="text">
    <div class="ovl"></div>
    <p class="par">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

We have a container with class "cont", which contains an inner div with class "text" (which will obviously contain our text). 
Within the "text" div, we find another div with class "ovl" -which will serve as an overlay, and finally a paragraph (class "par") which contains the text itself. As a text we choose a paragraph of the well-known "Lorem ipsum" placeholding text.

Now we need some help from CSS in order to achieve our goal, which is done like that:

.cont{
  margin:0 auto;
  width: 440px;
  height: 300px;
  border: 1px solid red;
  padding: 10px;
}
.text{
  position: relative;
  margin: 0 auto;
  width: 220px;
  height: 220px;
  border: 1px solid black;
  overflow: hidden;
}

.ovl{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: inset 0px -56px 26px 0px rgba(255,255,255,1);
}
.par{
  margin-top:0px;
  padding:10px;
}

While most CSS rules are purely for decoration, it's this one rule that does the job and creates this fading effect:

box-shadow: inset 0px -56px 26px 0px rgba(255,255,255,1);

We apply shadow to the "ovl" div, which is inset (inward direction), 0 pixels horizontal lenght, -56 pixels vertical lenght, we blur it a bit with 26 pixels of radius, 0 pixels of spreading radius and our color of choice is white:

#FFFFFF; 

or given in rgba mode:

rgba(255,255,255,1);

Of course the above numbers and/or color need to be altered depending on the case each time, but that should give you a rough idea as to how "box-shadow" is working. For the color, a "rule of thumb" is that it should resemble the background color of the container. Check the middle column of the footer of our website, where there's a similar effect but the box-shadow color is dark grey (#252525).

To see the above tutorial in action, check out this Fiddle.

 

 

Theo Orphanos

Categories

Tags

We will be delighted to hear from you

Why choose us?

Simply because we love creating beautiful websites, and we are damn good at it!

Custom Applications development

We at ILUS Web love programming!
All kinds of programming... Applications programming, Microcontrollers programming, Websites programming.
And we like to try to approach perfection everytime!

The best thing about a boolean is even if you are wrong, you are only off by one bit.

We value User Experience

A beautiful and functional design is very important, as it interacts directly with the end User. And after all, it's the User's experience that we all work for!
Because a happy User, is of the most valuable assets to a business!

If you think good design is expensive, you should look at the cost of bad design.

Search Engine Optimization

A Website without S.E.O. is like a ship with broken steering, sailing in stormy weather!
In this day and age, the number of websites is reaching new records every day. Consequently, the competition of every new Site is huge, and the only way to "survive" is a methodical and successful S.E.O.

S.E.O. is what the Search Engines talk about you, when you are not present!
chart
  • Contact: Theo Orphanos
  • Address: ul. Tsanko Tserkovsky 11, Lozenets , 1164
    Sofia - Bulgaria
  • Cellphone: +359 88 999 4209
  • Website: ilusweb.com
  • Email: infoilusweb.com

Blog

Web Hosting and Hacker Attacks

The term web-hosting means the storage of a website on a server's hard drive. A website is basically a folder which contains various files and subfolders. By copying it to a Web Server, we are actually making it available to everyone on the Internet. All it takes to retrieve the contents of this folder, is a browser that will take various files and will combine them into a human-readable web page.

A server consists of the hardware, which is quite similar to the hardware of a Personal Computer, the Operating System -which is the piece of software that manages computer's resources and facilitates it's communication with the "outside world", the Services -which determine and regulate all the individual tasks that the server is carrying out, and some other programs such as antivirus, firewall etc.

Although web hosting at first might sound as a simple and easy task, turns out that not only is not, but also carries a lot of complexity and requires the skills of a specialist called "Systems Administrator". That is of course if we don't want to turn our Server into a playground for hackers!

The Systems Administrator (or SysAdmin), will not only choose the correct software bundle (operating system, services and programs), but occasionally might also suggest hardware modifications that he/she thinks are necessary for the smooth operation of the server.

Once the server is ready, the proper software is installed, and passed all the security audits, it goes directly into production. If it's a "Web Server" we create the users and upload the websites that it will host. Once a website is online, it exposes the IP address of it's hosting server, and a non-stop series of hacker attacks begins. Hackers usually employ mass attack programs (also known as bots) to locate a server with a certain voulnerability, and then proceed to hacking that machine. Among their goal usually is to "deface" the hosted websites, or to steal information from their database.
The most important and difficult job of a SysAdmin is to monitor these attacks, find software vulnerabilities and install the appropriate software updates and patches, that will eliminate these vulnerabilities.

A very popular attack is the DoS (Denial of Service). It was trending some years ago, when most machines were not software-ready to repell such attacks.
Every server has a certain amount of resources that can serve so many requests per minute. A DoS attack creates numerous requests from completely different IP addresses located all around the world, that a server cannot handle and just "blocks". This does not usually impose a permanent damage to the server or the hosted websites, but once it becomes "targeted" is a matter of minutes or even seconds before it goes "down".

The repelling of various attacks is a never ending task and nowadays rather automated for servers that host mainstream websites. The hard part begins when we host websites of "special interest" such as political or religious sites which except from their many fans will also attract a good number of opponents!
In that case is very much anticipated an organized hacking attack often by one or more -and often quite competent- attackers, that can really make SysAdmin's life very difficult.

Validating European VAT numbers with PHP

As time passes, accounting laws become more and more strict, making electronic invoicing applications even more complicated. Over the last years and especially in the European Union, the issue of phony invoices has been increased, forcing the countries-members to adopt new laws in order to fight that.

One handy tool for us developers is VIES (VAT Information Exchange Service). It's a free of charge service that is maintained by EU, and can be used to check the validity of every VAT number of European Union. Queries can be run either by using their web interface or programmatically with the use of a Simple Objects Access Protocol (SOAP) API.

The implementation is relatively easy, and it was one of the things that motivated us to include it during the development of AssetCRM. And because any form of knowledge should be spread, I thought to post a simple example of extracting information from VIES using PHP language. Luckily in VIES website there is a well documented technical information which will guide us through our first steps in creating a script:

We'll define constant VIES_URL with the actual VIES communication URL.
It will be quite handy to build the script inside a function, since this will facilitate it's later usage:

<?php

DEFINE ( 'VIES_URL', 'http://ec.europa.eu/taxation_customs/vies/services/checkVatService' );

function viesCheckVAT($countryCode, $vatNumber, $timeout = 30) {
 $response = array ();
 $pattern = '/<(%s).*?>([\s\S]*)<\/\1/';
 $keys = array (
 'countryCode',
 'vatNumber',
 'requestDate',
 'valid',
 'name',
 'address' 
 );

 $content = "<s11:Envelope xmlns:s11='http://schemas.xmlsoap.org/soap/envelope/'>
 <s11:Body>
 <tns1:checkVat xmlns:tns1='urn:ec.europa.eu:taxud:vies:services:checkVat:types'>
 <tns1:countryCode>%s</tns1:countryCode>
 <tns1:vatNumber>%s</tns1:vatNumber>
 </tns1:checkVat>
 </s11:Body>
 </s11:Envelope>";

 $opts = array (
 'http' => array (
 'method' => 'POST',
 'header' => "Content-Type: text/xml; charset=utf-8; SOAPAction: checkVatService",
 'content' => sprintf ( $content, $countryCode, $vatNumber ),
 'timeout' => $timeout 
 ) 
 );

 $ctx = stream_context_create ( $opts );
 $result = file_get_contents ( VIES_URL, false, $ctx );

 if (preg_match ( sprintf ( $pattern, 'checkVatResponse' ), $result, $matches )) {
 foreach ( $keys as $key )
 preg_match ( sprintf ( $pattern, $key ), $matches [2], $value ) && $response [$key] = $value [2];
 }
 return $response;
}

?>

Now to use the above function. 
Say we want to check a German (DE) VAT number (1234567890). We call the function like that:

viesCheckVAT("DE","1234567890"); // which of course it will return "1234567890" as an invalid VAT number ))

The way the above function works, is quite simple:

First we create the arrays and variables, and then we construct the "xml" file that we send to the defined VIES_URL using header and other options specified in array "opts". Finally return the response by looping over the response keys, with a good ol' "foreach" loop.

This function was originally published by Eugen Mihailescu.

 

CSS text fading effect

The fading-text effect is a handy solution when we have a text that doesn't fit a given container. In this case, we want to fit as much text necessary to fill the container, and also to apply a fade-out effect in the bottom -just before the end of the containing div.
It's something like "our Services" part on our Homepage, where there are three fixed-size divs, which get their contents from other webpages and -due to aesthetical reasons- these contents should remain contained neatly within these divs.

Lets start by creating the HTML environment:

<div class="cont">
  <div class="text">
    <div class="ovl"></div>
    <p class="par">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

We have a container with class "cont", which contains an inner div with class "text" (which will obviously contain our text). 
Within the "text" div, we find another div with class "ovl" -which will serve as an overlay, and finally a paragraph (class "par") which contains the text itself. As a text we choose a paragraph of the well-known "Lorem ipsum" placeholding text.

Now we need some help from CSS in order to achieve our goal, which is done like that:

.cont{
  margin:0 auto;
  width: 440px;
  height: 300px;
  border: 1px solid red;
  padding: 10px;
}
.text{
  position: relative;
  margin: 0 auto;
  width: 220px;
  height: 220px;
  border: 1px solid black;
  overflow: hidden;
}

.ovl{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: inset 0px -56px 26px 0px rgba(255,255,255,1);
}
.par{
  margin-top:0px;
  padding:10px;
}

While most CSS rules are purely for decoration, it's this one rule that does the job and creates this fading effect:

box-shadow: inset 0px -56px 26px 0px rgba(255,255,255,1);

We apply shadow to the "ovl" div, which is inset (inward direction), 0 pixels horizontal lenght, -56 pixels vertical lenght, we blur it a bit with 26 pixels of radius, 0 pixels of spreading radius and our color of choice is white:

#FFFFFF; 

or given in rgba mode:

rgba(255,255,255,1);

Of course the above numbers and/or color need to be altered depending on the case each time, but that should give you a rough idea as to how "box-shadow" is working. For the color, a "rule of thumb" is that it should resemble the background color of the container. Check the middle column of the footer of our website, where there's a similar effect but the box-shadow color is dark grey (#252525).

To see the above tutorial in action, check out this Fiddle.

 

 

Gallery

Copyright ©2020 ILUS Web Ltd. All rights reserverd.

Privacy policy | Terms of use