How to add rotateing Social Icons to your site

How to add rotateing Social Icons to your site

on 

Masr Design

The lesson Today about an CSS widget 

very simple like the other lessons before

just follow the explanation 

just add this code in your HTML part

<style>
a.masrdesignsocialicon img {
}
a.masrdesignsocialicon:hover img {
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);

    }

</style>

<div align="center">

<table border="0" width="100%" id="table1" height="100">
    <tr>
<td>
 <p align="center">
 <a class="masrdesignsocialicon" href="http://www.facebook.com/masrydesigns"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5brUyBENZwbwSVDsjVUWXqky1WzTAy28Hs7asbfSjlpnhiTo3VbZO6JIoIm3OD6WPsithFLFuO9Kd5Jp8CALui-cUNNDgDEn1LYa4SzNDKK1nDwFCAnc_IPy3pGoHxo4ExENqvp3Q9OVf/s1600/masrdesign-facebook+-+Copy.png" alt="Facebook"  width="80" height="80" /></a>&nbsp;

         <a class="masrdesignsocialicon" href="https://twitter.com/MohamedSalahMan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Os6635TKMeg_RsOydsL2q-lgIi87UOQazzEBHydlfvINrzZj0R9pYClb0MKRpWsBO-QKfFKaqf8v0nhAfIAKnMcbNJirzbfejlrUJ8ojnxGOMszRR2WMvW0eebUvcq78aunvoa5aL932/s1600/masrdesign-twitter+-+Copy.png" alt="twitter"  width="80" height="80" /></a>&nbsp;

         <a class="masrdesignsocialicon" href="http://www.youtube.com/m7mdsala7mansor"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKuAw21Yr4rNvnoarIGxTSsXqSn7WYoJnDqWiJF9VHWrGjz5qY6JVQbALnlWHyHeBoBrqes6oY6Tbhoku-x6lwnam5Sph8im4vGApXBdkqY5JKsXUnTeqROAHvuyfwx3HUDylmXMO71HC/s1600/masrdesign-youtube+-+Copy.png" alt="Youtube"  width="80" height="80" /></a>&nbsp;</p>
</td>
</tr>
</table>
 </div>

The end of the lesson

any question contact me

Dont forget see other lessons click here

Masr Design

How to add gradient to the box or button with CSS

How to add gradient to the box or button with CSS

on 

Masr Design

The lesson Today about CSS is adding gradient

is also very simple like the other lessons befor

just follow the explanation

Go to the CSS part and search about the element which

you want to add

then add the follownig code

background: -moz-linear-gradient(top, #ff0000 0%, #8e0202 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#8e0202)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #ff0000 0%,#8e0202 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #ff0000 0%,#8e0202 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #ff0000 0%,#8e0202 100%); /* IE10+ */

background: linear-gradient(to bottom, #ff0000 0%,#8e0202 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#8e0202',GradientType=0 ); /* IE6-9 */

 

 

 

 

 

you can change the color
ff0000 and 8e0202

the end of the lesson

any question contact me

Dont forget see other lessons click here

Masr Design

 

How to add border radius to the image or box with CSS

How to add border radius to the image or box with CSS

on 

Masr Design

The second lesson of CSS is adding border radius

very simple

just follow the explanation

Go to the CSS part and search about the element which 

you want to add

and add the follownig code

to add border to the box or image use this CSS code

border:1px solid #000000; 

 to add border radius to the box or image use this CSS code

- moz-border-radius:3px;

-webkit-border-radius:3px; 

border-radius:3px;

 and you can change the color #000000

and also you can change the 3px

the end of the lesson

any question contact me

Dont forget see other lessons click here

Masr Design

How to add new style of contact form to your web site

How to add new style of contact form to your web site

our lesson today is about adding new form of Contact Me from Foxyform

 

  our explanation today is very simple

all you will do to go to this site

www.foxyform.com

and choose what do you want to add different field to your form

Title
Name
E-Mail
Subject
Your e-mail address 

you will receive the message to an email on it

then click on "Create Formular" button

take the code and put it on a new page on HTML part

and enjoy

the end of the lesson

any question contact me

Dont forget see other lessons click here

Masr Design

Navbar of websites group C grey and white from Masr Design

Navbar of websites group C grey and white from Masr Design
 
Today offer you site visitors Masr Design group of menu bar Nfbar the various sites and forums in various forms and colors of variety
Design is an image only and not Code

 
Anyone who wants to put the code in his website 

communicate with us via our Facebook page Masry Designs Navbar are groups all the group includes Navbar different can also change colors

Give you the first set of design Masr Design

Group C
A Navbar grey and white

 
See the photos
copyrights are reserved for Masr Design site

Click on the image to see the original size

 

I hope that you will enjoy everything we offer to you
With regards masrdesign team
Thank you

For more designs Click here

buttons designs for sites red from masrdesign

 buttons designs for sites red from masrdesign

Electronic design buttons for sites from the site masrdesign
Today give you a set of buttons, which are used in locations in design and i who design these buttons
I will give you the buttons on the sets

 
Group C
This group includes the type of buttons is red and black and this fits sites that are the color red

 masrdesignred
Copyright Reserved for

I hope that you will enjoy everything we offer to you
With regards masrdesign team

For more designs Click here

كود معرض الصور يصلح للتبادل الاعلانى

كود معرض الصور

معاينة الكود