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

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

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

طريقة تركيب واجهة للمدونة - وضع هيدر للمدونة

طريقة تركيب واجه المدونة , عمل صورة للمدونة , كيفية عمل هيدر للمدونة , شرح عمل هيدر للمدونة ,ازاى اعمل صورة فى اول المدونة , خلفية للمدونة , درس عمل هيدر مدونة وتركيبه, طريقة وضع واجهة مدونة

كيفية وضع هيدر او واجهة للمدونة

الطريقة سهلة جداا وبسيطة

يوجد طريقتين لتركيب هيدر للمدونة مع العلم ان قوالب بلوجر تختلف عن بعضها

اولا الطريقة الاولى وهى المشهورة

1.  ادخل على لوحة الادارة فى المدونة
2.  اختار تصميم > ثم عناصر الصفحة
3.  سوف تجد فى الادوات مستطيل فيه  " اسم مدونتك (رأس الصفحة) "
4.  ستجد فى هذا المستطيل كلمة تحرير اضغط عليها مثل الصورة

اضغط على الصورة لرؤيتها بالحجم الاصلى

سوف تفتح لك نافذه اتبع الشرح فى الصورة

 اضغط على الصورة لرؤيتها بالحجم الاصلى

اختار الصورة من على الجهاز ثم اختار احد الخيارات

• بدلا من العنوان
• خلف العنوان 

ثم قم بحفظ القالب وكده انتهت الطريقة الاولى

الطريقة الثانية تختلف من قالب لقالب

1.  ادخل على لوحة الادارة فى المدونة
2.  اختار تصميم > ثم تحرير  Html
3.  قم بحفظ القالب اولا عن طريق تنزيل قالب كامل  (مهمة)
4. ثم علم على توسيع القالب
5.  ابحث  ( باستخدام ctrl + F ) عن

#header-wrapper

 وهذه صورة توضيحية لما ستجده ( تذكر ليست كل القوالب مثل بعض )

 اضغط على الصورة لرؤيتها بالحجم الاصلى

شرح الصورة

اللون الاخضر الكلمة التى بحثت عنها
اللون الاحمر رابط الصورة التى سوف تتغير
اذا وجدته بعد  background  كم بالصورة فالحمد لله واذا لم تجده فى هذه المنطقة 
انصحك باستخدام الاطريقة الاولى اذا كنت مبتدأ ولا تعلم شئ عن لغة Html و Css

اذا وجدته قم برفع الصورة على احد السيرفرات وخذ رابط الصورة وضعه مكان الرابط الاصلى

بعد ان تتأكد ان ليس يوجد اخطاء اضغط على معاينه اذا ظهرت الصورة فالحمد لله اضغط حفظ القالب

• وتذكر اى حرف زائد او فاصلة او اى شئ لن يتم عرض القالب لذالك قم بتحديد الرابط فقط

واى استفسار انا موجود

الموضوع الاصلى : طريقة تركيب واجهة للمدونة - وضع هيدر للمدونة

مدونة : تصميمات مصر

درس عمل خلفية خطوط مضيئة بالفوتوشوب

درس عمل خلفية مضيئة , درس خلفية بالفوتوشوب , كيفية عمل خلفية مضيئة بالفوتوشوب , درس عمل خطوط مضيئة بالوان الطيف

بسم الله الرحمن الرحيم

والصلاة والسلام على رسول الله ( عليه الصلاة والسلام )

درسنا النهاردة عن كيفية عمل خلفية خطوط مضيئة بالفوتوشوب

افتح برنامج الفوتوشوب واضغط على الصورة وشاهد باقى الخطوات

اضغط على الصورة لعرضها بالحجم الطبيعى

والسلام عليكم ورحمة الله وبركاته

درس تأثير البلازما على النص او الكتابة من تصميمات مصر

درس الكتابة مثل البلازما , درس كيفية الكتابة المشعة مثل البلازما , فى الفوتوشوب , دروس للفوتوشوب, درس كتابة اسمى بالبلازما , شرح , الكتابة المضيئة, كيفية الكتابة المضيئة مثل البلازما والنيون

بسم الله الرحمن الرحيم 
والصلاة والسلام على رسول الله عليه افضل الصلاة والسلام

درسنا النهاردة هو درس وجميل جداا ورائع

(( درس تأثير البلازما على النص او الكتابة ))

ازاى نكتب مثل البلازما

افتح برنامج الفوتوشوب افتح عمل جديد واختار خلفية سودة

عشان الكتابة تبان بوضوح اضغط على لير الخلفية مرتين لازالة القفل

من عليها وبعدين اكتب اى شىء

تانى خطوة: اتبع الخطوات اللى فى الصورة التالية بالترتيب ثم شاهد الناتج 

( اضغط على الصورة ضغطة واحدة لرؤيتها بالحجم الطبيعى  )

ارجوا ان تكونو استفدتم من الدرس وانتظروا القادم أحلى باذن الله

اذا عجبك الدرس اضف تعليق لتشجيعى وجزاكم الله خير

والسلام عليكم ورحمة الله وبركاته

درس الكتابة بالنيون - الكتابة المضيئة مثل النيون من تصميمات مصر

درس الكتابة مثل النيون , درس كيفية الكتابة المشعة مثل النيون, فى الفوتوشوب , دروس للفوتوشوب, در كتابة اسمى بالنيون , شرح , الكتابة المضيئة, كيفية الكتابة المضيئة مثل النيون

بسم الله الرحمن الرحيم والصلاة والسلام على رسول الله عليه افضل الصلاة والسلام

درسنا النهاردة هو درس بسيط وسهل وجميل جداا

(( درس الكتابه بالنيون ))

كيف نكتب مثل اضاءة النيون ؟؟

اول خطوة :

افتح برنامج الفوتوشوب افتح عمل جديد واختار خلفية سودة

عشان الكتابة تبان بوضوح اضغط على لير الخلفية مرتين لازالة القفل

من عليها وبعدين اكتب اى شىء ثم ادمج لير الكتابة مع الخلفية 

تانى خطوة: اتبع الخطوات اللى فى الصورة التالية بالترتيب ثم شاهد الناتج 

( اضغط على الصورة ضغطة واحدة لرؤيتها بالحجم الطبيعى  )

ارجوا ان تكونو استفدتم من الدرس وانتظروا القادم أحلى باذن الله

والسلام عليكم ورحمة الله وبركاته

درس توضيح الصورة بالفوتوشوب بالصور

فى هذا الدرس سوف نتعلم كيفية توضيح الصورة هذا الدرس مفيد جدا للجميع قم بمشاهدة الصورة و تابع الشرح فى الصورة

ثم طبقه على اى صورة عندك  واى استفسار فى الدرس تفضل به

 

• لا تنسى باقى الدروس سوف تجدها فى قسم دروس فوتوشوب