CSS3 - מדריך לאנמציה ראשונית - החלפת צבעים בתמונה עם Fade.

**Quartz** · 22-11-2012, 07:32

טוב אז לפני שנתחיל לפי דעתי CSS3 כבר מחליף את JQ (:
אז נתחיל
-------------------------
שלום לכולם, כאן עדן והיום אני רוצה ללמד אתכם כיצד להכין קוד פשוט בCSS3 של אנמצית החלפת צבעים עם פאדים.
או-קיי.
אז נתחיל.
הקוד הראשי הוא :

קוד:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

</body>
</html>

אז נתחיל להסביר,

קוד:

width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

כאן הגדרנו את הריבוע שרצינו , הגודל שלו , הרוחב שלו , התאמה לכל הדפדפנים וכ'.

קוד:

@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

כאן הגרדנו 4 צבעים שיתחלפו באמצע האנמציה.

קוד:

קוד:

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

והינה כל השאר, אותו דבר רק התאמה לכל הדפדפנים חוץ מאקספלורר.
מקווה שהבנתם , הפנתם ותוכלו להשתמש בזה בעתיד - בהצלחה לכולם!

**-Smoxer-** · 22-11-2012, 18:00

חשוב לציין שאפשר לעשות עוד הרבה דברים עם CSS3. כמו אנימציות(הזזת אובייקטים) וכד'.
מדריך נחמד, תודה רבה.

**CSS** · 22-11-2012, 18:10

כל הכבוד על המדריך, לדעתי עדיין עדיף jQuery.
נוסף ללינקיה.

**Quartz** · 22-11-2012, 21:54

תודה רבה לכולם, לפי דעתי הCSS3 לא קשה יותר מCSS בהרבה, ואף קל יותר מjQuery .
בהצלחה לכולם באמת מקווה שיעזור. (:

**Quartz** · 22-11-2012, 22:02

זוכרים את זה שהייתם צריכים כל פעם להקטין את התמונה ?
אז לא עוד (:

קוד:

background-size:80px 60px;

עכשיו עם הקוד הזה אפשר לשים את התמונה קטנה יותר מהגודל שלה באמת ..
זה יקל על הרבה אנשים בחיתוך ובקידוד.

**Quartz** · 22-11-2012, 22:07

העידכון החדש הוא הText Shadow.
איך עושים זאת ?
כך :

קוד:

קוד:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

פשוט תשחקו עם המספרים ותבחרו מה תרצו ובמקום ה#F0000 תרשום את הצבע אשר תרצו שיהיה כShadow -צל.
בהצלחה לכולם

**CSS** · 22-11-2012, 22:35

תודה, תקף גם לגבי box-shadow.

**Quartz** · 22-11-2012, 22:38

נכתב במקור על ידי CSS

תודה, תקף גם לגבי box-shadow.

צודק, שכחתי לציין (:

**Quartz** · 22-11-2012, 22:45

נתקלתם פעם ב-webkit או ב-o או ב-moz ? לא הבנתם מה הכוונה של הדברים האלו?
אז ככה.
webkit של Safari וGoogle Chrome .
o של Opera.
moz - של Mozilla Firefox
אם תקראו מדריכים שלי של CSS3 תוכלו להבין למה זה משמש גם,
בהצלחה לכולם.

**-Smoxer-** · 22-11-2012, 23:19

זה יותר הסבר מאשר מדריך..

**Quartz** · 22-11-2012, 23:51

כן, בערך (:

**Quartz** · 23-11-2012, 10:50

ברוכים הבאים ,
היום נלמד כיצד לבנות תזוזה בCSS3
אז הקוד הוא :

קוד:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;

/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s; // מהירות התזוזה
-moz-animation-timing-function:linear;
-moz-animation-delay:1s; // כמה שניות ייקח לזה להתחיל לאחר שהדף יעלה
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running; // נותן לזה פקודה לרוץ ולא סתם לזוז מצד לצד
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s; // מהירות התזוזה
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s; // כמה שניות ייקח לזה להתחיל לאחר שהדף יעלה
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running; // נותן לזה פקודה לרוץ ולא סתם לזוז מצד לצד
/* Opera: */-webkit-animation-name:myfirst;
-o-animation-duration:5s; // מהירות התזוזה
-o-animation-timing-function:linear;
-o-animation-delay:1s; // כמה שניות ייקח לזה להתחיל לאחר שהדף יעלה
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running; // נותן לזה פקודה לרוץ ולא סתם לזוז מצד לצד

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:0px;}
75%  {background:green; left:0px; top:0px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:0px;}
75%  {background:green; left:0px; top:0px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:0px;}
75%  {background:green; left:0px; top:0px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:0px;}
75%  {background:green; left:0px; top:0px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>



<div></div>

</body>
</html>

או-קיי. אז כל מה שאתם צריכים לדעת כתוב שמה ,
חוץ מהקאיפראמס שבהם זה ההחלפת צבעים אני דיי בטוח שתבינו את זה לבד.
חשוב לציין שהאנמציה הזאת לא עובדת על אקספלורר,
בהצלחה לכולם.

**Quartz** · 23-11-2012, 11:08

אז לשלום לכולם,
לאחר שהתחלתי לעשות מדיריכים לCSS3 אני מתחיל לעשות עכשיו גם לCSS3 וגם לjQuery .
אז נתחיל .
זה הקוד :

קוד:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script> /* הגדרנו תגית התחלה של JQ */
<script> 
$(document).ready(function(){ 
  $("button").click(function(){ /* הגדרנו הפעלת אנמציה בלחיצה על כפתור */
    $("div").animate({ /* הגדרנו לדיב אנמציה */
      left:'250px', /* מיקום */
      opacity:'0.5', /* שקיפות */
      height:'150px', /* גודל */
      width:'150px' /* גודל */
    });
  });
});
</script> 
</head>
 
<body>
<button>Start Animation</button> /* הגדרנו כפתור */

<div style="background:#98bf21;height:100px;width:100px; position:absolute;"> /* הגדרנו מאפיינים לריבוע שעליו נעשת האנימציה */
</div>

</body>
</html>

בתוך הקוד הסברתי מה כל דבר עושה (:

**-Smoxer-** · 23-11-2012, 13:27

הערות ב-HTML לא כך:
/**/
אלא כך:

**Quartz** · 23-11-2012, 13:46

נכתב במקור על ידי -Smoxer-

הערות ב-HTML לא כך:
/**/
אלא כך:

אני יודע >.< כתבתי זאת כך בכוונה.

שם משתמש		זכור אותי	רישום לאתר
סיסמה		שכחת סיסמה?

קהילות פורומים, הורדות, יעוץ ותמיכה

אשכולות דומים

מדריך| עשיית רצף תמונות לסרט - בתמונה אחת! מדריך מפורט + תמונות המחשה

עבודת צבעים בתמונה

[מוכר] מדריך לניק עם 2 צבעים | 10 נקודות

[מדריך]ניק בעל שני צבעים - מומלץ! -

[מדריך]ניק בעל שני צבעים - מומלץ! -

CSS3 - מדריך לאנמציה ראשונית - החלפת צבעים בתמונה עם Fade.

כלי נושא