درود مهمان گرامی! ثبت نام
آموزش ساخت بازی در #C آموزش UDK آموزش مدل سازی در Maya
آموزش ساخت بازی در VB آموزش Unity - پروژه محور آموزش مدل سازی با 3Ds Max
آموزش برنامه نویسی اندروید آموزش Unity - ساخت منو آموزش متحرک سازی در 3Ds Max
آموزش ساخت بازی حدس تصویر آموزش Unity - متحرک سازی مجموعه آموزش های ساخت بازی
● آموزش های رایگان ● تبلیغات دیجیتال هوشمند ● استخدام در فرادرس

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
ترفندهای سرعتی CSS
#1
کج کردن تصویر ، وقتی ماوس روی آن قرار گیرد(ویژه فایرفاکس):

resim

یک فایل html با کد زیر ایجاد کنید :
کد php:
<head>
<
style>
.
class1
{
 
width800pxmargin0 auto

.
class1 img 

margin20px
border5px solid #eee; 
-webkit-box-shadow4px 4px 4px rgba(0,0,0,0.2); 
-
moz-box-shadow4px 4px 4px rgba(0,0,0,0.2); 
box-shadow4px 4px 4px rgba(0,0,0,0.2); 
-
webkit-transitionall 0.5s ease-out
-
moz-transitionall 0.5s ease
-
o-transitionall 0.5s ease

.
class1 img:hover 

-
webkit-transformrotate(-7deg); 
-
moz-transformrotate(-7deg); 
-
o-transformrotate(-7deg); 

</
style>
</
head>
<
body>
<
div class="class1">
<
img src="Desert.jpg" />
</
div>
</
body

عکسی به نام Desert.jpg در مسیر جاری قرار دهید.
فایل html را اجرا کنید و ماوس را روی عکس برده و نتیجه را مشاهده نمایید.
توضیح :
یک کلاس به اسم class1 ایجاد کردم(با ID هم میشد که قبلش # میاریم ولی من از کلاس استفاده می کنم و قبلش نقطه (.) میارم.
بعدش واسه این کلسا کد کج شدن رو توی رویداد mouse over نوشتیم.
حالا هرچزی رو بخوایم خصوصیات این کلاس رو به ارث ببره باید این کلاس رو والدش کنیم یا بهش ربط بدیم . چطوری؟ اینطوری مثلا :
کد:
<img src="aks.jpg" class="myClass" />
واسه div و بقیه هم به همون صورت فقط اسم کلاسی که نوشتیم رو بهش ربط میدیم.
توی CSS هرجا پیشوند moz میاد یادتون باشه روی موزیلا اجرا میشه(mozilla firefox browser).
مثل :moz-box-shadow که کنار عکس یه سایه هایی ایجاد می کنه واسه زیبایی که توی کد بالا هست
-
احتیاج به حفظ کدها نداریم. sample زیاده توی اینترنت. منتها چیزای کاربردی رو با عکس بذاریم قشنگتره واسه اموزش.
ویلا من هرچیزی رو آموزش نمیدم یا اگه بدم سعی کمی کنم تمیز باشه. امیدوارم مفید بوده باشه. اگه تشکرها بالا بره چیزای قشنگتری میذارم با اینکه درگیز مسائل دیگه ای هستم ولی سعی می کنم هرچند وقت یکبار چیزای قشنگ بذارم تا یه جا واسه ساخت سایت یا درآمد زایی دوستان مفید باشه.
یادم رفت بگم border ضخامت دور یک کادر یا تصویر یا ... رو مشخص می کنه که پیکسل دادیم بهش(درصد هم میشد که نسبت به اندازه های سیستم های مختلف اعمال میشه)
margin هم حاشیه هست. فرقش رو با padding بعدا می گم(یکیشون فاصله نوشته های داخلی هست که مثلا واسه div بکار میره و یکیش واسه فاصله های بیرونی هست که نسبت به اشیایی که اطراف هست در فاصله می گیره. و همینطور margin-left و margin-top و margin-right و ... رو داریم که اگه فقط بنویسیم margin: و بعدش یک عدد بدیم هم واسه حاشیه ی راست اعمال می کنه هم چپ هم طرف بالا و پایین).
گفتم اونایی که قبلشون moz میاد واسه mozilla اعمال میشه.
یادم رفت اینم بگم اونایی که قبلشون o میاد واسه opera اعمال میشه.
rotate(-7deg هم 7 درجه منفی می چرخونه(deg یعنی degree به معنی درجه هست)
پاسخ
 سپاس شده توسط Amirns ، m.babayi574 ، King of Power ، h.b ، Milad_Hyper
#2
سورس آلبوم slide show با js و CSS (ویژه فایرفاکس)

resim
http://s5.picofile.com/file/8145427168/S..._.zip.html
بعد از unzip وارد پوشه بشید و فایل index.html رو با firefox اجرا کنید.
پاسخ
 سپاس شده توسط Milad_Hyper
#3
استفاده از تکه های یک عکسsadsplit کردن یک عکس png) :
با استفاده از این ترفند می تونید با استفاده از width و height مشخص شده و مختصات، قسمت دلخواه از یک فایل png رو جداکنید و در بخش لازم از html قرار بدید:
http://www.w3schools.com/css/tryit.asp?f..._hover_nav
پاسخ
 سپاس شده توسط Milad_Hyper
#4
سلام باتشکر از اموزش هاتون
روش اول میشه با trasform.rotate(-140deg) مثلا چرخوند
چند وقته کار نکردم فک کنم این روش بود
توی قاب خیس این پنجره ها

عکسی از جمعه ی غمگین میبینم

چه سیاهه به تنش رخت عزا

تو چشاش ابرای سنگین میبینم

داره از ابر سیاه خون میچکه

جمعه ها خون جای بارون میچکه

نفسم در نمیاد جمعه ها سر نمیاد

کاش میبستم چشامو این ازم بر نمیاد

داره از ابر سیاه خون میچکه

جمعه ها خون جای بارون میچکه

عمر جمعه به هزار سال میرسه

جمعه ها غم دیگه بیداد میکنه

آدم از دست خودش خسته میشه

با لبای بسته فریاد میکنه

داره از ابر سیاه خون میچکه

جمعه ها خون جای بارون میچکه

جمعه وقت رفتنه موسم دل کندنه

خنجر از پشت میزنه اون که همراه منه

داره از اب سیاه خون میچکه

جمعه ها خون جای بارون میچکه
تنهایی بیداد
پاسخ
 سپاس شده توسط sajjad3011
#5
resim
سورس html:
کد php:
<head>
<
style>
body
{
background:#CCCCCC;
padding-right:50px;
padding-left:50px;
float:right;
font-family:"b yekan";
text-align:right;
direction:rtl;
}
.
c1 
{
    
width:320;
    
/*background: radial-gradient(ellipse, red, yellow);*/
    
background:#FF66CC;
    
direction:rtl;
    
text-align:right;
    
font-family:"b yekan";
    
padding:10px;
    
border-style:solid;
}
@
font-face {
    
font-family:'byekan';/*تعریف یک نام برای فونت*/
    
src:url('BYEKAN.TTF');/*اکسپلورر 9 به بعد*/
    
src:local('BYEKAN'),/*بررسی نصب بودن فونت در سیستم کاربر*/
}
.
class1 
    
font-family:"b yekan";
    
direction:rtl;
    
text-align:right;
}
</
style>
</
head>
<
body>
<
div class="class1">
 <
h1>برای اینکه یک طراح وب خوب بشیم باید از قواعد و اصول مربوطه پیروی کنیم.</h1>
</
div>
<
br/>
<
label for="weight">Weight (in pounds)</label>
<
input id="weight" type="range" min="50" max="1000" value="1000"><br>
<
progress value="0.5">25%</progress>
<
p>So far we've raised $14,000. <meter max="50000" value="14000"></meter>
<div id="editableElement" contentEditable>متن قابل ویرایش</div>
<div class="c1">
سلام
متن آزمایشی
متن آزمایشی
<br/>
متن آزمایشی
متن آزمایشی

</div> 
موقع ذخیره با notepad به صورت utf ذخیره کنید نه ansi
و type رو روی all file بذارید نه text
پسوند رو هم html بذارید.
از خود سورس فوق خیلی چیزای جدید میشه یاد گرفت.
من اونو با استفاد از یه کتاب html جدید طراحی کردم.
یادتون نره فونت byekan.ttf رو باید در پوشه ی جاری کپی کنید.
توی موزیلا جواب میده.
توی IE جدید هم همینطور.
ممکنه توی بعضی مرورگرها جواب نده ولی اگه مرورگهاتونو اپدیت کنید جواب میده.
این روا فایرفاکس واسه اکثر محیطا عرضه میشهteeth
padding : فاصله ی داخلی
margin: فاصله خارجی : فاصله ی شی از اشیای بیرونی. (از تمام جهات بالا و پایین و چپ و راست)
margin-left:فاصله بیرونی از سمت چپ
بقیه رو هم با dream weaver درک کنید. یه حرف تایپ کنید بقیشو لیست می کنه
( dream weaver از نظر من بهترین محیط اسکریپت نویسی وب هست)
سایت responsive یعنی چه؟ سایتی که پایدار و stable باشه و روی مرورگرهای مختلف قالبش زیاد به هم نریزه رو می گیم ریسپانسیو.

responive=واکنش گرا = پاسخگو = پایدار

کد نمیخوام بیارم میخوام فقط اشاره کنم خودتون بدوید دنبالش(از من به یک اشاره/ از تو به سر دویدن ',} ) :

کلاس class1 رو در مثال اولی که زدم نگاه کنید. کدی نوشتم که مروگرهای opera و firefox و IE رو بررسی کنه و طبق مروگر مربوط عمل لازم رو انجام بده.

اصلا چرا نیازه مرورگر رو بررسی کنیم؟ پاسخ: IE ممکنه از بعضی کدها پشتیبانی نکنه پس باید کدهای ویژه ی خودشو بنوییسیم بقیه مروگر ها هم به همون صورت ... teeth .

اگه بخوایم خیلی ساده کار کنیم و پروژه های خیلی ساده بسازیم که روی موبایل و ... هم اجرا بشن و قالبشون رو حفظ کنن و در اصطلاح responsive باشن کافیه به جای px از % استفاده کنید.

مثال: یک بخش بسازید که پهنایآن نصف پهنای screen دستگاهی باشد که قرار است کد روی آن دستگاه اجرا شود و همینطور ارتفاع آن 10 درصد از اسکرین دستگاه باشد:
حل:
کد php:
<head>
<
style>
.
kelas1
{
 
width:50%;
 
height:10%;
}
</
style>
</
head>
<
div class="kelas1" >
 
متن آزمایشی
 متن آزمایشی
 متن آزمایشی
 
</div
روش دوم
کد php:
<div style="width:50%;height:10%" >
 
متن آزمایشی
 متن آزمایشی
 متن آزمایشی
 
</div
روش های سوم و چهارم و ... هم بلدم ولی به عهده ی تحقیقات خودتون چون حالش نیست wink
پاسخ
 سپاس شده توسط Milad_Hyper
#6
برای طراحی منوهای html به سرعت ، توصیه می کنم از ابزارهای منوساز html استفاده کنید.
4 تا ابزار رو من می گم بقیه با خودتون: easy button menu maker + deluxe tuner+ sothink dhtml menu + all web meus

شاتteeth :
resim

پاسخ
 سپاس شده توسط Milad_Hyper
#7
یکی از کتب PDF بسیار خوب برای اچ تی ام ال فایو ،کتاب "HTML5: The Missing Manual" هست.
Rounded Corners : گوشه های گرد کادر ها teeth :
resim
کد php:
.roundedBox {
backgroundyellow;
border-radius25px 50px 25px 85px;

یا
کد php:
.roundedBox {
backgroundyellow;
border-top-left-radius150px 30px;
border-top-right-radius150px 30px;


شفاف کرن یک ناحیه teeth :
resim
کد php:
.semitransparentBox {
backgroundrgb(170,240,0);
opacity0.5;


مطالب فوق بسیار ساده بود. توی کتابی که گفتم چیزای جدید خوبی هست. HTML5 دارای امکانات و تگ های جدید زیادی هست که خودتون کتاب رو پیدا کنید و بخونید و یاد بگیرید wink
پاسخ
 سپاس شده توسط Milad_Hyper
#8
zoom عکس وقتی ماوس روی آن برود :
کد php:
<html>
<
head>
img width:100px;height:100px; }
img:hover width:500px;height:500px; }
</
head>
<
body>
<
div>
<
img src="1.png" />
<
img src="2.png" />
<
img src="3.png" />
</
div>
</
body>
</
html
دایره ای کردن عکس وقتی ماوس روی آن برود:
resim
کد php:
<html>
<
head>
<
style>
/*MORPH*/
img{
width:300px;
height:300px;
}
 
img:hover{
  
border-radius50%;
}
</
style>
</
head>

<
body>
  <
img src="1.jpg">
  <
img src="2.jpg">
</
body>
</
html
لینک مفید :
http://designshack.net/articles/css/joshuajohnson-2/
http://designshack.net/?p=19746
پاسخ
 سپاس شده توسط Milad_Hyper
#9
مثال های CSS :
http://www.w3schools.com/css/css_examples.asp
پاسخ
 سپاس شده توسط Milad_Hyper
#10
کد HTML و CSS برای نوشتن Parallax
HTML
کد:
<div id="title" class="slide header">
 <h1>Pure CSS Parallax</h1>
</div>

<div id="slide1" class="slide">
 <div class="title">
   <h1>Slide 1</h1>
   <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
 </div>
</div>

<div id="slide2" class="slide">
 <div class="title">
   <h1>Slide 2</h1>
   <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
 </div>
 <img src="https://lorempixel.com/640/480/abstract/6/">
 <img src="https://lorempixel.com/640/480/abstract/4/">
</div>

<div id="slide3" class="slide">
 <div class="title">
   <h1>Slide 3</h1>
   <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
 </div>
</div>

<div id="slide4" class="slide header">
   <h1>The End</h1>
</div>

CSS


کد:
html {
 height: 100%;
 overflow: hidden;
}

body {
 margin:0;
 padding:0;
    perspective: 1px;
    transform-style: preserve-3d;
 height: 100%;
 overflow-y: scroll;
 overflow-x: hidden;
 font-family: Nunito;
}

h1 {
  font-size: 250%
}

p {
 font-size: 140%;
 line-height: 150%;
 color: #333;
}

.slide {
 position: relative;
 padding: 25vh 10%;
 min-height: 100vh;
 width: 100vw;
 box-sizing: border-box;
 box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
    transform-style: inherit;
}

img {
 position: absolute;
 top: 50%;
 left: 35%;
 width: 320px;
 height: 240px;
 transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
 padding: 10px;
 border-radius: 5px;
 background: rgba(240,230,220, .7);
 box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

img:last-of-type {
 transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}

.slide:before {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}

.title {
 width: 50%;
 padding: 5%;
 border-radius: 5px;
 background: rgba(240,230,220, .7);
 box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.slide:nth-child(2n) .title {
 margin-left: 0;
 margin-right: auto;
}

.slide:nth-child(2n+1) .title {
 margin-left: auto;
 margin-right: 0;
}

.slide, .slide:before {
 background: 50% 50% / cover;  
}

.header {
 text-align: center;
 font-size: 175%;
 color: #fff;
 text-shadow: 0 2px 2px #000;
}

#title {
 background-image: url("https://lorempixel.com/640/480/abstract/6/");
 z-index:2;
}

#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;

}

#slide1:before {
 background-image: url("https://lorempixel.com/640/480/abstract/4/");
 transform: translateZ(-1px) scale(2);
}

#slide2 {
 background-image: url("https://lorempixel.com/640/480/abstract/3/");
 z-index:2;
}

#slide3:before {
 background-image: url("https://lorempixel.com/640/480/abstract/5/");
 transform: translateZ(-1px) scale(2);
}

#slide4 {
 background: #222;
}
پاسخ
 سپاس شده توسط qwerty13




کاربرانِ درحال بازدید از این موضوع: 1 مهمان