Flexible hovering effect for images

Here we are going to create a flexible hovering effect using CSS3 opacity property.
opacity is a CSS3 property that allows you to specify how opaque a given element
is. Coupled with the RGBA, opacity offers
another method to add transparency to the designs we create
for the web.
One of the ways to use opacity is to create simple and
flexible hover states for hyperlinked graphics, using the variation
in transparency .
We’re going to use the opacity property to not only control
the :hover and :focus treatment, but also to set the initial
level of transparency.

Before we start ,we need the graphics to be used as hyperlinks.

So open your graphics editor and create an icon as fully-white PNG

image with transparent background.

Create an html file and name as hover.html.
Now add your image in your html file with following line of code.

<a href="#"><img src="img/logo.png" alt="My logo" /></a>

Place the image inside a dark background ( here I have used #222 ).

<div id='container'>
<a href="#"><img src="img/logo.png" alt="My logo" /></a>
</div>

Now its time to add some styles.

<style>
#container {
background:#222;
width:100px;
height:100px;
text-align:center;
}
</style>

let’s add the opacity values that will dim the icons in
their default state, brightening them up a bit when hovered or
focused.

#container a img {
opacity: 0.25;
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
}

Here we’re showing the images at 25% opacity, then bringing
them up to 70% opacity when hovered or focused .
Note that the opacity property doesn’t require vendor prefixes,
and will work in Safari, Chrome, Firefox, and Opera.
IE8 and below don’t support opacity, but there is a hack to achieve this.

The IE opacity hack

Opacity is supported in Internet Explorer 9
Beta, but we can also mimic the same result for older versions
of IE by using the proprietary Microsoft filter property.
use of the filter property can bring increased performance
overhead depending on where or how often it’s used.
It’s a hack—but it provides a means to an end.
Here’s how it works:

#container a img {
border: none;
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 5-7 hack */
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
filter: alpha(opacity = 70); /* IE 5-7 hack */
}

The syntax is similar, with a value of opacity passed through
IE’s alpha filter. Note that IE8 ignores the filter property
and requires the vendor-prefixed –ms-filter with some additional
(ugly) values.

Adding a transition to the opacity swap will smooth
out that value change, and provide a bit of animated richness
that’ll tie this whole technique together.
We’ll make the transition rather quick (just 0.2 seconds) and ease it in and
then out again.

#container a img {
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 5-7 hack */
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
filter: alpha(opacity = 70); /* IE 5-7 hack */
}

With the transition in place, we now have a simple technique
for using opacity to craft a flexible hover experience using a
single set of images.

Download source files from here...

Continue Reading

Glowing text effect using CSS3

We have seen websites containing texts which glows on hovering over it.

In this post,we will take a quick look on how this effect is achieved.

For this technique to see in action, you need a modern browser which supports CSS3.

We will be using CSS3 shadows for this effect.

• Create an html file and name it as glow.html
• Create an anchor with class name glow-text inside a div with id container .

<div id="container">
<a href="#" class="glow-text">I'm glowing</a>
</div>

Now its time to add some styles.

<style>
#container {
 width:300px;
 height:100px;
 background:blue;
 margin:auto;
}
a.glow-text {
 font-size: 3em;
 line-height: 1.4em;
 color: white;
 font-style: italic;
 font-family: Georgia, times, serif;
 color: #fff;
 text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 text-decoration: none;
  padding: 10px 15px;
 cursor:pointer;
}
a.glow-text:hover {
 text-shadow: 0px 0px 10px #fff;
}
</style>

 What is text-shadow

A CSS2 property (dropped in 2.1 then reintroduced in CSS3)
that adds a shadow to hypertext, with options for the direction,
amount of blur, and color of the shadow.

 text-shadow: 0px 0px 10px #fff;

What is RGBA

Not a CSS property, but rather a new color model introduced
in CSS3, adding the ability to specify a level of opacity along
with an RGB color value.

rgba(0, 0, 0, 0.5) /* black at 50% opacity */

Enjoy using glowing text-effect in your website.

Download glow.html

Continue Reading

Create your own CMS-Part 14

Before creating our blog module,just make sure to do the following modifications.

• In engine.php ,add the following line to start all the enabled modules before the line $theme->load_css();

$module->start_all_enabled_modules();

• Update show_msg function in functions.php in main folder.

/**************************************
showing a message
EG:-  show_msg('TITLE OF YOUR MESSAGE','CONTENT');
******************************************/
function show_msg($title,$msg)
{
echo '<script type="text/javascript" src="'.BASE.'/jquery.js"></script>
 <script type="text/javascript" src="'.BASE.'/jquery.freeow.js"></script>';
echo '<script type="text/javascript">
  (function ($) {
  $(document).ready(function() {

   var title, message, opts, container;
   message="'.$msg.'";
   title="'.$title.'";   
   $("#freeow-tr").freeow(title,message);

  });
}(jQuery));
</script>
';
}

• Add some more function to work with modules and themes.

/***************************
Get the list of modules present in the cms
returns both installed and uninstalled modules
****************************/
function get_modules_list()
{
global $module;
$modules_list=$module->get_modules_list();
return $modules_list;
}
/***************************
Get the list of themes in the cms
****************************/
function get_themes_list()
{
global $theme;
$themes_list=$theme->get_themes_list();
return $themes_list;
}
/************************
checks whether a module is enabled
**************************/
function is_module_enabled($module_name)
{
global $module;
return $module->is_active($module_name);
}

function register_module($name)
{
global $module;
$module->register_module($name);
}
/************************
checks whether a module is installed
**************************/
function is_module_installed($module_name)
{
global $module;
return $module->is_module_installed($module_name);
}
/*************************************
get the details of a module from its
manifest file.
************************************/
function get_module_details($name)
{
$module_details=xml2array(MODULESPATH.'/'.$name.'/manifest.xml');
$module_details['picture']=BASE.'/'.MODULESPATH.'/'.$name.'/pic.png';
return $module_details;
}

The function register module is to add the module to the database.The description and details of a module will be present in the manifest.xml file inside the directory of corresponding module.So we need a function to parse the xml file.

The function will be provided in the upcoming tutorial.

As we are advancing a little bit,the default theme will have to be modified very much.Instead ,You can download the 'fbtheme' for next stage.

Download fbtheme

Continue Reading

Learn CSS transitions in easy way

In this post,we are going to learn a few tips regarding css transitions.Before we start ,take a look at how
W3C explains CSS transitions.

CSS Transitions allow property changes in CSS values to occur
smoothly over a specified duration.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes
to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition
to the background color swap of a link. When hovered over,
the link’s background color will change, and we’ll use a transition
to smooth out that change—an effect with a
few simple lines of CSS.The markup is a simple hyperlink, like so:

<a href="#" class="sample">Hover me!</a>

Next, we’ll add a declaration for the normal link state with a
little padding and a light background colour, followed by the
background swap to another colour on hover

a.sample {
padding: 5px 10px;
background: #1991fc;
}
a.sample:hover {
color: #030;
background:  #2fc;
}

Now let’s add a transition to that background color change.
This will smooth out and animate the difference over a specified
period of time

a.sample {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.sample:hover {
color: #030;
background:  #2fc;
}

You’ll notice the three parts of a transition in the declaration:

• transition-property: The property to be transitioned (in this case,
  the background property)
• transition-duration: How long the transition should last (0.3
  seconds)
• transition-timing-function: How fast the transition happens over
  time (ease)

The timing function value allows the speed of the transition
to change over time by defining one of six possibilities: ease,
linear, ease-in, ease-out, ease-in-out, and cubic-bezier
(which allows you to define your own timing curve).

For longer animations, the
timing function you choose becomes more of an important
piece of the puzzle, as there’s time to notice the speed changes
over the length of the animation.
Default value is ease.

DELAYING THE TRANSITION

For example, let’s
say we wanted the background transition to happen half a
second after the link is hovered over. We can do that using the
transition-delay property.

The following example adds the same background switch to
the :focus state. This enables triggering the transition from
either hovering over or focusing the link (via the keyboard, for
example).

a.sample {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.sample:hover,
a.sample:focus {
background:  #2fc;
}

TRANSITIONING MULTIPLE PROPERTIES

Let’s say that along with the background color, we also want
to change the link’s text color and transition that as well. We
can do that by stringing multiple transitions together, separated
by a comma. Each can have their varying duration and
timing functions .
Eg:

-o-transition: background .3s ease, color 0.2s linear;

TRANSITIONING ALL POSSIBLE PROPERTIES

An alternative to listing multiple properties is using the all
value. This will transition all available properties.
Let’s drop all into our simple example instead of listing
background and color separately. They’ll now share the
same duration and timing function.

a.foo {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.foo:hover,
a.foo:focus {
color: #030;
background:  #2fc;
}

This is a convenient way of catching all the changes that happen
on :hover, :focus, or :active events without having to
list each property you’d like to transition.

Continue Reading

Create your own CMS-Part 13

Now look at the two url given below

• http://localhost/stupid/index.php?module=blogs&sub=editblog&action=save
• http://localhost/stupid/blogs/editblog/save

The second url looks more readable and pretty.We can achieve this by url rewriting using htaccess or using php.In our cms we will be using htaccess.Also we will deny access for direct viewing of files in htaccess file.All the files can only be viewed through index.php or index1.php and soon....

• Create a file in the root directory of your website (in our case 'stupid' directory)
• Name it as '.htaccess'.Edit the file using notepad.

<FilesMatch "\.php$">   
 Order Allow,Deny  
 Deny from all
</FilesMatch>
<FilesMatch "index[0-9]?\.php$">  
 Order Allow,Deny   
 Allow from all
</FilesMatch>
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)\=([a-zA-Z0-9_-]+)$ index.php?module=$1&sub=$2&action=$3&$4=$5
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/$ index.php?module=$1&sub=$2&action=$3
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)\=([a-zA-Z0-9_-]+)$ index.php?module=$1&sub=$2&$3=$4
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/$ index.php?module=$1&sub=$2
RewriteRule ^action\=([A-Za-z0-9\_\-\/]+)$ index.php?u_action=$1
RewriteRule ^([A-Za-z0-9\_\-\/]+)/$ index.php?module=$1

In order to distinguish the action parameter within a module from user actions like login,register etc,the url variable 'action' previously used in actions.php in actions folder will be replaced by 'u_action'.
So kindly replace the first 6 lines in actions.php with the following lines.

global $user;
if(isset($_GET['u_action']))
{
$action=$_GET['u_action'];
switch($action)

Now you can set the action of login form as

<?=BASE?>/action=login

So we are done with url rewriting.In the next post we will be creating a blog module.

Continue Reading