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 box shadow to the image or box with CSS

How to add box shadow to the image or box with CSS

on 

Masr Design

The lesson Today about CSS is adding box shadow

is also very simple like the other lessons

just follow the explanation

Go to the CSS part and search about the element which

you want to add

then add the follownig code

-moz-box-shadow:2px 2px 2px 2px #616161;
 -web-kit-box-shadow: 2px 2px 2px 2px #616161;
 -goog-ms-box-shadow: 2px 2px 2px 2px #616161;
    box-shadow:2px 2px 2px 2px #616161; 

you can change the color
and change px

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 a new font family to your web site from google fonts

How to add a new font family to your web site from google font

our lesson today is about adding new font from google fonts with CSS

the idea is very simple just follow the explanation

1-

go to google font from here

www.google.com/fonts

2-

choose what you want from the big group of fonts

then click on " add to collection " button

3-

Now click on " use " button in the down tap

you will go to the page which from it you will choose the font which you choose

and sign on it then go to down

4-

copy the following code

4-

Go to your website and search about <head> section

and under it paste the code

now the new font-family is added to your website

5-

the last step 

Go to any part on your site in STYLE part of CSS

and change the font family with  the word after family

for example

 <link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>

font-family:Armata,Geneva,sans-serif



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

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

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

معاينة الكود

ترقيم الصفحات فى المدونة

اكواد ترقيم الصفحات مختلفة

<!-- Stylish colored Navigation Widget For Blogger @ http://www.masrdesign.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.way2blogging.org */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.tqarob.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /* www.masrdesign.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.masrdesign.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.masrdesign.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob @ http://www.masrdesign.blogspot.com -->

<!-- Stylish colored Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.masrdesign.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.masrdesign.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /* www.masrdesign.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.masrdesign.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.masrdesign.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob @ http://www.masrdesign.blogspot.com -->

-------------------------------------------------------------------------------

<!-- Stylish colored Navigation Widget For Blogger @ http://www.masrdesign.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.masrdesign.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.masrdesign.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.masrdesign.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.masrdesign.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';

</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob@ http://www.masrdesign.blogspot.com -->

-------------------------------------------------------------------------------

<!-- Stylish colored Navigation Widget For Blogger @ http://www.masrdesign.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.masrdesign.blogspot.com */
.tqshowpageArea a {text-decoration:underline;color: #fff;}/* www.masrdesign.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.masrdesign.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.masrdesign.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.masrdesign.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob @ http://www.masrdesign.blogspot.com -->

تضع كل كود فى اداة جافا سكربت فقط