سلام دوست من به سايت آموزش برنامه نویسی خوش آمديد لطفا براي استفاده از تمامي امکانات

دانلود فايل , شرکت در انجمن و گفتگو با ساير اعضا در سايت ثبت نام کنيد

آموزش طراحی منو برای دکمه بیشتر "More"

تاريخ: امروز, : یکشنبه 09 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

آموزش طراحی سایت - آموزش طراحی منو برای دکمه بیشتر "More"

دانلودآموزش طراحی سایت

آموزش ایجاد دکمه More Button in Navbar در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه" more " ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

یک navigation bar بصورت dropdown ایجاد کنید

یک منوی dropdown ایجاد کنید به این صورت که زمانی که کاربر ماوس را بر روی عناصر داخل navigation bar میبرد ، نمایان گردد.

            <div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

توضیح مثال : از هر مولفه ای برای باز کردن منوی dropdown استفاده کنید برای مثال مولفه .

از مولفه container ( مانند ) برای ایجاد منوی dropdown استفاده کنید و لینک های dropdown را به آن اضافه کنید.

مولفه را در ابتدا و انتهای دکمه قرار دهید تا منوی dropdown را بخوبی توسط کد css جایدهی کنید.

قدم دوم : کد CSS را اضافه کنید.
مثال :

            /* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
 
/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}
 
/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}
 
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
 
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
 
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}
 
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">خانه</a>
  <a href="#news">اخبار</a>
  <div class="dropdown">
    <button class="dropbtn">بیشتر 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">لینک 1</a>
      <a href="#">لینک 2</a>
      <a href="#">لینک 3</a>
    </div>
  </div> 
</div>

<h3>دکمه بیشتر / منوی کشویی داخل یک نوار پیمایشی</h3>
<p>روی دکمه "بیشتر" با ماوس نگه دارید  تا منو لینک دار باز شود</p>

</body>
</html>

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 44

نظرات (0)

طراحی دکمه صفحه های قبلی و بعدی سایت

تاريخ: امروز, : جمعه 07 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

طراحی دکمه صفحه های قبلی و بعدی سایت

دانلودآموزش طراحی سایت

استایل دکمه های بعدی و قبلی Next and Previous Buttons در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های بعدی و قبلی Next and Previous Buttons ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

<a href="#" class="previous">« Previous</a>
<a href="#" class="next">Next »</a>
 
<a href="#" class="previous round">‹</a>
<a href="#" class="next round">›</a>

قدم دوم : کد CSS را اضافه کنید.
مثال :

               a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}
 
a:hover {
  background-color: #ddd;
  color: black;
}
 
.previous {
  background-color: #f1f1f1;
  color: black;
}
 
.next {
  background-color: #4CAF50;
  color: white;
}
 
.round {
  border-radius: 50%;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>دکمه های قبلی و بعدی</h2>

<a href="#" class="previous">&laquo; قبلی</a>
<a href="#" class="next">بعدی &raquo;</a>

<a href="#" class="previous round">&#8249;</a>
<a href="#" class="next round">&#8250;</a>
  
</body>
</html>

نمونه دکمه های بعدی و قبلی Next and Previous Buttons

نمونه دکمه های بعدی و قبلی Next and Previous Buttons

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 67

نظرات (0)

آموزش طراحی دکمه ایکون در website

تاريخ: امروز, : چهارشنبه 05 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

آموزش طراحی سایت - آموزش طراحی دکمه ایکون در website

آموزش رایگان طراحی سایت

آموزش ایجاد دکمه آیکون Icon Buttons در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html آیکون Icon Buttons ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
                    <!-- Add font awesome icons to buttons  -->
<p>Icon buttons:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
 
<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

قدم دوم : کد CSS را اضافه کنید.
مثال :

                /* Style buttons */
.btn {
  background-color: DodgerBlue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}
 
/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}
</style>
</head>
<body>

<h2>دکمه های آیکون </h2>
<p>دکمه های آیکون :</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>

<p>دکمه های آیکون با متن:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

</body>
</html>

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 38

نظرات (0)

آموزش ایجاد دکمه اعلان در سایت

تاريخ: امروز, : سه شنبه 04 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

آموزش طراحی سایت - آموزش ایجاد دکمه اعلان در سایت

آموزش رایگان طراحی سایت

آموزش ایجاد دکمه اعلان Notification Buttons در وبسایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html اعلان Notification Buttons ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

<a href="#" class="notification">
  <span>Inbox</span>
  <span class="badge">3</span>
</a>

قدم دوم : کد CSS را اضافه کنید.
مثال :

    .notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}
 
.notification:hover {
  background: red;
}
 
.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: red;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}
</style>
</head>
<body>

<h1>دکمه اعلان</h1>

<a href="#" class="notification">
  <span>Inbox</span>
  <span class="badge">3</span>
</a>

</body>
</html>

عکس دکمه اعلان Notification Buttons

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 32

نظرات (0)

آموزش طراحی دکمه Pill Buttons در وب

تاريخ: امروز, : یکشنبه 02 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

آموزش طراحی سایت - آموزش طراحی دکمه Pill Buttons در وب

فیلم آموزش طراحی سایت

ایجاد دکمه Pill Buttons در وبسایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه Pill Buttons ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

<button class="button">Pill Button</button>

قدم دوم : کد CSS را اضافه کنید.
مثال :

       .button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

.button:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Pill Buttons</h2>

<button class="button">Pill Button 1</button>
<button class="button">Pill Button 2</button>

</body>
</html>

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 50

نظرات (0)

آموزش طراحی سایت -ساخت انواع دکمه دانلود

تاريخ: امروز, : جمعه 31 اردیبهشت 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

آموزش طراحی سایت -ساخت انواع دکمه دانلود

فیلم آموزش طراحی سایت

ایجاد دکمه دانلود (Download Buttons) در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های دانلود (Download Buttons) ایجاد کنیم.

چگونه دکمه های دانلود ایجاد کنیم::

به دکمه های HTML ، دستور icon library مانند Font Awesome را اضافه کنید:

قدم اول : کد HTML را اضافه کنید.
مثال :

              <!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
                    <!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
 
                    <!-- Full width -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

قدم دوم : کد CSS را اضافه کنید.
مثال :

           /* Style buttons */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}
 
/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}
</style>
</head>
<body>

<h2>استایل دکمه های دانلود</h2>

<p>Auto width:</p>
<button class="btn"><i class="fa fa-download"></i> دانلود</button>

<p>Full width:</p>
<button class="btn" style="width:100%"><i class="fa fa-download"></i> دانلود</button>

</body>
</html>

عکس دکمه های دانلود (Download Buttons)

عکس دکمه های دانلود (Download Buttons)

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 35

نظرات (0)

پروژه طراحی سایت - آموزش اضافه کردن دکمه بارگذاری در وب سایت

تاريخ: امروز, : پنجشنبه 30 اردیبهشت 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

پروژه طراحی سایت - آموزش اضافه کردن دکمه بارگذاری در وب سایت

فیلم آموزش طراحی سایت

نحوه اضافه کردن دکمه های بارگذاری (Loading Buttons) در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های بارگذاری (Loading Buttons) ایجاد کنیم.

چگونه دکمه های بارگذاری را فرم دهیم:

قدم اول : کد HTML را اضافه کنید.
مثال :

                   <!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
                    <!-- Add font awesome icons to buttons (note that the fa-spin class rotates the icon) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading
</button>
 
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>
 
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading
</button>

قدم دوم : کد CSS را اضافه کنید.
مثال :

/* Style buttons */
.buttonload {
  background-color: #4CAF50; /* Green background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px /* Set a font size */
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.buttonload {
  background-color: #4CAF50; /* Green background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 24px; /* Some padding */
  font-size: 16px; /* Set a font-size */
}

/* Add a right margin to each icon */
.fa {
  margin-left: -12px;
  margin-right: 8px;
}
</style>
</head>
<body>

<h2>دکمه های بارگذاری</h2>

<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading
</button>

<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>

<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading
</button>

</body>
</html>

عکس دکمه های بارگذاری (Loading Buttons)

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 45

نظرات (0)

پروژه طراحی سایت -نحوه اضافه کردن دکمه بیشتر یا کمتر بخوانید Read More

تاريخ: امروز, : دوشنبه 27 اردیبهشت 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

پروژه طراحی سایت -نحوه اضافه کردن دکمه بیشتر یا کمتر بخوانید Read More

آموزش تصویری طراحی سایت

نحوه اضافه کردن دکمه "بیشتر بخوانید" یا Read More در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html و جاوا اسکریپت دکمه های " بیشتر بخوانید " یا " کمتر بخوانید " (Read More Read Less Button) ایجاد کنیم.

نحوه اضافه کردن دکمه "کمتر بخوانید" یا Read Less در سایت

قدم اول : کد HTML را اضافه کنید.
مثال :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel
    <span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor.
    Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi,
    sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.
    Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
    Sed dapibus pulvinar nibh tempor porta.</span></p>
 
 <button onclick="myFunction()" id="myBtn">Read more</button>

قدم دوم : کد CSS را اضافه کنید.
مثال :

#more {display: none;}

قدم سوم : کد Javascript را اضافه کنید.
مثال :

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");
 
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>

عکس اول : دکمه "بیشتر بخوانید" یا Read More

نحوه اضافه کردن دکمه بیشتر یا کمتر بخوانید

عکس دوم : دکمه "کمتر بخوانید" یا Read Less

دکمه "کمتر بخوانید" یا Read Less

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 67

نظرات (0)

آموزش طراحی سایت - دکمه شبکه های اجتماعی در سایت

تاريخ: امروز, : یکشنبه 26 اردیبهشت 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

آموزش طراحی سایت - دکمه شبکه های اجتماعی در سایت

آموزش تصویری طراحی سایت

دکمه شبکه های اجتماعی در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html ، دکمه های شبکه های اجتماعی (Social Media Buttons) ایجاد کنیم.

چطور دکمه های رسانه های اجتماعی را فرم دهیم

قدم اول : کد HTML را اضافه کنید.
مثال :

 <!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
                    <!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>

قدم دوم : کد CSS را اضافه کنید.
مثال :

                  /* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
 
/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}
 
/* Set a specific color for each brand */
 
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}
 
/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}
</style>
</head>
<body>

<h2>Style Social Media Buttons</h2>

<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
      
</body>
</html> 

امتياز :

1
2
3
4
5

نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0

بازديد : 48

نظرات (0)

آموزش ساخت دکمه روي عکس (Button on Image) در وبسايت

تاريخ: امروز, : سه شنبه 21 اردیبهشت 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

دوره آموزش طراحی سایت-آموزش ساخت دکمه روي عکس (Button on Image) در وبسايت

طراحي سايت صفر تا 100

آموزش ساخت دکمه روي عکس (Button on Image) در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html ، دکمه روي عکسي (split button) ایجاد کنیم.

Split Button Dropdowns

قدم اول : کد HTML را اضافه کنید.

مثال :

<div class="container">
    <img src="img_snow.jpg" alt="Snow">
    <button class="btn">Button</button>
       </div>

قدم دوم : کد CSS را اضافه کنید.

 /* Container needed to position the button. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
}
 
/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}
 
/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
 
.container .btn:hover {
  background-color: black;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container .btn:hover {
  background-color: black;
}
</style>
</head>
<body>

<h2>دکمه روي عکس</h2>
<p>:اضافه شدن دکمه روي عکس</p>

<div class="container">
  <img src="http://articles.tahlildadeh.com/image.axd?picture=webads.jpg" alt="Snow" style="width:100%">
  <button class="btn">Button</button>
</div>

</body>
</html>

آموزش ساخت دکمه روي عکس

امتياز :

1
2
3
4
5

نتيجه : 2 امتياز توسط 1 نفر مجموع امتياز : 2

بازديد : 229

نظرات (0)

صفحات وبلاگ

تعداد صفحات : 18 صفحه قبل 1 2 3 4 5 ...17 18 صفحه بعد

ورود به سايت

آموزش طراحی سایت - آموزش طراحی منو برای دکمه بیشتر "More"

آموزش ایجاد دکمه More Button in Navbar در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه" more " ایجاد کنیم.

نمونه یک

طراحی دکمه صفحه های قبلی و بعدی سایت

استایل دکمه های بعدی و قبلی Next and Previous Buttons در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های بعدی و قبلی Next and Previous Buttons ایجاد کنیم.

نمونه یک

آموزش طراحی سایت - آموزش طراحی دکمه ایکون در website

آموزش ایجاد دکمه آیکون Icon Buttons در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html آیکون Icon Buttons ایجاد کنیم.

نمونه یک

آموزش طراحی سایت - آموزش ایجاد دکمه اعلان در سایت

آموزش ایجاد دکمه اعلان Notification Buttons در وبسایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html اعلان Notification Buttons ایجاد کنیم.

نمونه یک

آموزش طراحی سایت - آموزش طراحی دکمه Pill Buttons در وب

ایجاد دکمه Pill Buttons در وبسایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه Pill Buttons ایجاد کنیم.

نمونه یک

آموزش طراحی سایت -ساخت انواع دکمه دانلود

ایجاد دکمه دانلود (Download Buttons) در سایت

چگونه دکمه های دانلود ایجاد کنیم::

نمونه یک

پروژه طراحی سایت - آموزش اضافه کردن دکمه بارگذاری در وب سایت

نحوه اضافه کردن دکمه های بارگذاری (Loading Buttons) در سایت

چگونه دکمه های بارگذاری را فرم دهیم:

نمونه یک

پروژه طراحی سایت -نحوه اضافه کردن دکمه بیشتر یا کمتر بخوانید Read More

نحوه اضافه کردن دکمه "بیشتر بخوانید" یا Read More در سایت

نحوه اضافه کردن دکمه "کمتر بخوانید" یا Read Less در سایت

نمونه یک

آموزش طراحی سایت - دکمه شبکه های اجتماعی در سایت

دکمه شبکه های اجتماعی در سایت

نمونه یک

دوره آموزش طراحی سایت-آموزش ساخت دکمه روي عکس (Button on Image) در وبسايت

آموزش ساخت دکمه روي عکس (Button on Image) در سایت

نمونه یک