نوشته‌های تازه

   نکات طراحی قالب ریسپانسیو : تعیین پهنا؟

تعیین کردن پهنا نمایش برای شکل نمایشی محتوا

@media screen and (min-width: 340px) {
  p {
    font-size: 2em;
  }
}

یا
@media screen and (max-width: 840px) {
  p {
    font-size: 2em;
  }
}

معمولا بسته به تمرکزی که ما برای نمایش محتوا در یک دستگاه داریم
از یکی از دو حالت Min  و یا Max استفاده میکنیم
در صورتیکه تمر کز ما برای موبایلها با ابعاد کم پهن هستند از Min و در صورتیکه مایل به
نمایش در چند دستگاه مختلف و متنوع هستمی از Max با تکرار آن استفاده می کنیم.

در این فایل چند نمونه صفحه دو ستونه و سه ستونه ریسپانسیو معرفی شده است.

دانلود فایل - سه ستونه
دانلود فایل - دو ستونه 

نويسنده admin تاريخ مهر ۱۱, ۱۳۹۵نظرات نظرات [۰]دسته بندي آموزش, اموزش طراحي وب و css

   طراحی یک قالب ریسپانسیو دو ستونه (واکنش گرا)

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

طراحی قالب ریسپانسیو / واکنش گرا

ابتدا کد html آن :

<div id=”container”>
<div id=”content”>محتوا در اینجا</div>
<div id=”navbar”>لینکهای دسترسی در اینجا</div>
</div>

کد Css آن :

/* for all devices (until the @media block) */
body {
font-family: Arial, Helvetica, sans-serif ;
}
@media only screen and (min-width: 630px) {
/* only for screens wider or equal to 630 pixels */
/* code from http://www.thesitewizard.com/css/design-2-column-layout.shtml */
#content {
float: right ;
width: 80% ;
}
#navbar {
float: right;
width: 20%;
}
}

واگر بخواهیم لینکهای ما در سمت دیگری باشند داریم :

 

کد های html :

<div id=”container”>
<div id=”navbar”>Navigation</div>
<div id=”content”>Content here</div>
</div>

 

کدهای Css :

@media all and (min-width: 630px) {
/* two column code */
#container {
display: flex ;
align-items: stretch ;
flex-flow: row wrap ;
}
#navbar {
order: 1 ;
width: 20%;
}
#content {
order: 2 ;
width: 80% ;
}
}
@media all and (max-width: 629px) {
/* one column code */
#container {
display: flex ;
align-items: stretch ;
flex-flow: column wrap ;
}
#navbar {
order: 2 ;
width: 100%;
}
#content {
order: 1 ;
width: 100% ;
}
}

همان طور که میبینید برای چیدمان ستونها از display: flex ; استفاده شده است که به امکان استفاده از  order: 1 ; را میدهد ولی میتوان به صورت معمول از display: block استفاده شود.

با کمک عبارت flex-flow: در سی اس اس می توانیم عمودی یا افقی بودن نمایش و چیدمان را با دو کد کنترلی (row یا column ) تعیین کنیم.

بدین ترتیب می توانیم قالبهای چند ستونه را به همین شیوه ترتیب بندی و نمایش دهیم و ابعاد آنها در تلفنهای همراه که صفحهای کوچکی دارند به صورت بهینه در زیر هم قرار گیرند.

 

دانلود چند نمونه و دمو پیش فرض طراحی ریسپانسیو

دانلود فایل

 

 


نويسنده admin تاريخ مهر ۱۱, ۱۳۹۵نظرات نظرات [۰]دسته بندي آموزش, اموزش طراحي وب و css

   نمایش اخبار و مطالب به صورت منوی ترتیبی

کد نمایش اخبار و مطالب سایت و وبلاگ به صورت بالا رونده ترتیبی

گام : ۱ 

ابتدا فایل اصلی را ایجاد می کنیم :

۱
۲
۳
۴
۵
۶
۷
۸
۹
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Ticker</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js "></script>
    </head>
 <body>
 </body>
</html>

 گام : ۲ 

کدها و نوشته های نمونه را اضافه می کنیم که همان متن و عنوان اخبار و مطالب ما است :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
<div class="ticker">
   <h3>Latest News</h3>
   <ul id="ticker">
       <li>Dummy data is benign information that does not contain any useful data, but serves to reserve spac...</li>
       <li>For testing, dummy data can also be used as stubs or pad to avoid software testing iss...</li>
<ul>
    <li>In operational use, dummy data may be transmitted for OPSEC purposes.</li>
</ul>
<ul>
    <li>Dummy data must be rigorously evaluated and documented to ensure that it does no...</li>
</ul>
<ul>
       <li>The topic of this article may not meet Wikipedia's general notability guideline.</li>
</ul>
</div>

 گام : ۳ 

کد جوا اسکریپت  را اضافه می نماییم :

۱
۲
۳
۴
۵
۶
۷
۸
<script type="text/javascript">
function ticker() {
    $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
    });
}
setInterval(ticker, 3000);
</script>

 

گام : ۴ 

برای ظاهر بهتر و زیر هم قرار گرفتن نوشته ها از کد گرافیکی سی اس اس استفاده می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
<style>
.ticker {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 0px 0px 5px #DDD;
background-color#F5F3E5;
text-align: left;
}
.ticker h3 {
padding: 0 0 10px 10px;
border-bottom: 1px solid #A7A7A7;
}
ul {
list-style: none;
padding: 0;
margin: 0;
font-style: italic;
}
ul li {
list-style: none;
height:50px;
padding:7px;
border-bottom: 1px solid #D6CFB8;
}
</style>

Moin Uddin

 


نويسنده admin تاريخ بهمن ۱۵, ۱۳۹۳نظرات نظرات [۰]دسته بندي آموزش, اموزش طراحي وب و css, کد جاوا

   کد ساخت تب-منو بدون رفرش سایت

 

گام : ۱

ابتدا ساختار فایل اصلی رو به صورت :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    
    </body>
</html>

 

گام : ۲

سر منو ها  :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
<h1>Simple Tabs</h1>
<ul>
    <li><a href="#java">Java</a></li>
    <li><a href="#php">PHP</a></li>
    <li><a href="#python">Python</a></li>
    <li><a href="#ruby">Ruby</a></li>
    <li><a href="#perl">Perl</a></li>
</ul>
<div id="java">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="php">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="python">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="ruby">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="perl">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>

تفکیک شده بر اسا آی دی منحصر به خود

گام : ۳

اکنون محتویات مربوط به هر سر منو را اضافه می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
<h1>Simple Tabs</h1>
<ul id="tabs">
    <li><a href="#java">Java</a></li>
    <li><a href="#php">PHP</a></li>
    <li><a href="#python">Python</a></li>
    <li><a href="#ruby">Ruby</a></li>
    <li><a href="#perl">Perl</a></li>
</ul>
<div id="java" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="php" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="python" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="ruby" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="perl" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>

Step: 4

اکنون برای ظاهر و در کنار هم قرار گرفتن سر منوها از کدهای سی اس اس استفاده می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
#tabs {
    margin: 0;
    overflow: hidden;
    padding: 0;
    zoom: 1;
    position:relative;
    top:2px;
    z-index: 1;
}
#tabs li {
    display: block;
    list-style: none;
    margin: 0;
    margin-right: 1px;
    padding: 0;
    float: left;
}
#tabs li a {
    display: block;
    padding: 2px 10px;
    border: 2px solid #817bfc;
    border-bottom: 0 none;
    text-align: center;
    text-decoration: none;
}
.tab-section {
    background:#d4efff;
    padding: 10px;
    border: 2px solid #817bfc;
}
#tabs li a.current {
    background: #d4efff;
    color: #000;
    border-bottom: 2px solid #d4efff;
}

می توانیم در فایل خارجی قرار دهیم :

<link rel="stylesheet" href="styles.css"/>

 

گام : ۵

اکنون کدهای جاوا اسکریپت را تنظیم می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
$(function(){
    $('.tab-section').hide();
    $('#tabs a').bind('click', function(e){
        $('#tabs a.current').removeClass('current');
        $('.tab-section:visible').hide();
        $(this.hash).show();
        $(this).addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});

و می توانیم باز هم به صورت فایل خارجی برای سئوی بهتر فراخوانی کنیم :

<script src="scripts.js"></script>

کد پنهان کردن تب :

$(function(){
    $('.tab-section').hide();  
});

کلیک شده :

$(function(){
    $('.tab-section').hide();
    $('#tabs a').bind('click', function(e){
        e.preventDefault();
    });
});

تغییر به محتوای تب جدید :

$(function(){
    $('.tab-section').hide();
    $('#tabs a').bind('click', function(e){
        $('#tabs a.current').removeClass('current');
        $('.tab-section:visible').hide();
        $(this.hash).show();
        $(this).addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});

دانلود کد در منبع کدهای توسعه دهندگان بین المللی :

Code Download:

You can download the code from this link Download From Github

Moin Uddin


نويسنده admin تاريخ بهمن ۱۵, ۱۳۹۳نظرات نظرات [۰]دسته بندي آموزش, اموزش طراحي وب و css, کد جاوا

   گزینه انتخاب امتیاز ستاره ای برای وب سایت

 

 گام ۱:
ابتدا فایل اصلی را ایجاد می نماییم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rating</title>  
</head>
<body>
    <p>Please rate this item:</p>
    <fieldset class="rating">    
        <input type="radio" name="stars" id="4_stars" value="4" >
        <label class="stars" for="4_stars">4 stars</label>
        <input type="radio" name="stars" id="3_stars" value="3" >
        <label class="stars" for="3_stars">3 stars</label>
        <input type="radio" name="stars" id="2_stars" value="2" >
        <label class="stars" for="2_stars">2 stars</label>
        <input type="radio" name="stars" id="1_stars" value="1" >
        <label class="stars" for="1_stars">1 star</label>
        <input type="radio" name="stars" id="0_stars" value="0" required>
        <label class="stars" for="0_stars">0 star</label>
        <span  class="label"> Rating: </span>
    </fieldset>
</body>
</html>

گام ۲:
فایل کدهای گرافیکی سی اس اس style.css

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.rating {
    width: 300px;
    height: 34px;
    background-color: #f6f3f3;
}
.rating label {
    text-indent: -100px;
    width: 40px !important;
    height: 30px;
    overflow: hidden;
    cursor: pointer;
}
.label {
    float: left;
    padding-top: 3px;
}
        
input[type="radio"] {
    padding-right: 4px;
    position: absolute;
    left: 340px;
    margin-top: 10px;
}
                
input[type="radio"], .rating label.stars {
    float: right;
    line-height: 30px;
    height: 30px;
}
span + input[type=radio] + label, legend + input[type=radio] + label {
    clear: right;
    margin-right: 80px;
    counter-reset: checkbox;
}
.rating input[type="radio"]:required + label:after {
    content: '';
    position: absolute;
    left: 340px;
    min-height: 10px;
    margin-top: -36px;
    text-align: right;
    background: #6cbf00;
    padding: 10px 10px;
    display: block;
    width: 50px;
}
.rating label.stars {
    background: transparent url('../img/star_off.png') no-repeat center center;
}
.rating label.stars:hover ~ label.stars,
.rating label.stars:hover,
.rating input[type=radio][name=stars]:checked ~ label.stars {
    background-image: url('../img/star.png');
    counter-increment: checkbox;
}
.rating input[type=radio][name=stars]:required + label.stars:after {
    content: counter(checkbox) " stars!";
}

گام ۳:
متا کدهای دستر فراخوانی را هم اضافه می کنیم :

۱
۲
۳
۴
۵
<head>
    <meta charset="utf-8">
    <title>Rating</title>
    <link rel='stylesheet' type='text/css' href='css/style.css'>
</head>

گام ۴:و تصاویر ستاره را نیز در پوشه تصاویر قرار می دهیم.

Github: Grab from Github

Moin Uddin


نويسنده admin تاريخ بهمن ۱۵, ۱۳۹۳نظرات نظرات [۰]دسته بندي آموزش, اموزش طراحي وب و css

   کد گرافیکی بارش باران توسط کدهای سی اس اس

 

گام اول: ۱
ابتدا این کد را در تگهای body قرار دهید.

۱
۲
۳
۴
۵
۶
۷
۸
<section class="rain"></section>
<div id="clouds">
    <div class="cloud x1"></div>
    <div class="cloud x2"></div>
    <div class="cloud x3"></div>
    <div class="cloud x4"><div>
    <div class="cloud x5"></div>
</div>

گام : ۲
کدهای سی اس اس را در بین تگهای head سایت خود قرار دهید.

 

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<style type="text/css">
*{ margin: 0, padding: 0;}
body {
   overflow: hidden
   background: #c9dbe9;
   background: -linear-gradient(top,#c9dbe9 0%, #fff 100%);
   background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
   background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%); 
}
.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
  width:1px;
  height:89px;
  position: absolute;
  bottom:200px;
  -webkit-animation: fall 1s linear infinite;
  -moz-animation: fall 1s linear infinite;
  
}
#clouds {
    padding: 100px 0;
}
.cloud {
    width: 200px;
    height: 60px;
    background: #fff;
    
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    
    position: relative;
}
.cloud:before, .cloud:after {
    content: '';
    position: absolute;
    top: -15px;
    left: 10px;
    background: #fff;
    width: 100px;
    height: 80px;
    
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}
.cloud:after {
    width: 120px;
    height: 120px;
    top: -55px;
    left: auto;
    right: 15px;
}
.x1 {
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
}
.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    opacity: 0.6;
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
}
.x3 {
    left: -250px;
    top: -200px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    opacity: 0.8;
    
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
}
.x4 {
    left: 470px;
    top: -250px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    opacity: 0.75;
    -webkit-animation: moveclouds 18s linear infinite;
    -moz-animation: moveclouds 18s linear infinite;
}
.x5 {
    left: -150px;
    top: -150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    opacity: 0.8;
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
    ۰% { margin-left: 1000px;}
    ۱۰۰% { margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
    ۰% { margin-left: 1000px;}
    ۱۰۰% { margin-left: -1000px;}
}
@-webkit-keyframes fall {
    to {margin-top:900px;}
}
@-moz-keyframes fall {
    to {margin-top:900px;}
}
</style>

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

۱
<link rel="stylesheet" type="text/css" href="style.css">

گام : ۳
کد مربوط به جاوا و افکت نمایشی رو هم اضافه می کنیم.

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
// number of drops created.
var nbDrop = 1000;
// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
    for( i=1;i<nbDrop;i++) {
    var dropLeft = randRange(0,1600);
    var dropTop = randRange(-1000,1400);
    $('.rain').append('<div id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }
}
// Make it rain
createRain();

و در پایان کد لایبری جامع رو قبل از کد افکت می افزاییم.

۱
۲
<script src="code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="rain.js"></script>

 

یک روز بارانی در وبلاگ یا وب سایت ما —

Mosleh Uddin


نويسنده admin تاريخ بهمن ۱۵, ۱۳۹۳نظرات نظرات [۰]دسته بندي آموزش, اموزش طراحي وب و css
« صفحه بعد  

دسته‌ها

پيشنهاد!