CSS Effect | 10 radial shadow Programming Tutorials Arabic Spanish (Latin America)

CSS Effect | 10 radial shadowYouTube↗ IA↗(long shot)
Education 3.5K views 43 likes 1 dislikes 30 Oct 2014

Programming Tutorials 65.7K subscribers Spain YouTube↗

في الفيديو سوف نرى الآن، وهذا تأثير الظل، وسوف يكون شيئا قليلا أكثر تعقيدا، وأكثر تقدما. ولكن أيضا، وهذا أثر أنا أحب

En el vídeo que vamos a ver ahora, de este efecto de sombra, va a ser algo un poco más complejo, más avanzado; pero también es, este efecto me gusta mucho

هو الظل شعاعي كما ترون في الصورة: له مربع مع difuminal الصغيرة جنبا إلى جنب، ولكن عندما لا الماوس تشكل الظل فقط في

es de la sombra radial Como ven en la imagen: tiene una caja con un pequeño difuminal bordeando, pero cuando se pose el ratón hace una sombra solamente en la

فوق وتحت؛ نصف دائري، نصف القطع الناقص، لذلك هو الظل شعاعي. حسنا ثم كيفية تحقيق ذلك. أريد لها أن تكون جدا

parte de arriba e inferior; medio circular, la mitad de una elipse, así que es una sombra radial. Pues bueno esto cómo se consigue. Pues va a ser muy

المثير للاهتمام أن نرى. حسنا لدينا في المقام الأول كما رأيتم هنا، لا بد لي صفي شعاعي الظل، جيد جدا، دعونا إنشائه الظل هنا شعاعي و

interesante verlo. Vamos haya Bueno lo primero de todo como ya has visto aquí, tengo mi clase sombra radial, así que bueno, vamos a crearla aquí sombra radial y

في هذه الحالة هنا لدينا لوضع الموقف: النسبية، لأن لدينا لوضع هذه الظلال اثنين: أعلى وأسفل. مع قبل وبعد

en este caso aquí tenemos que ponerle un position: relative, porque tenemos que posicionar esas dos sombras: la superior y la inferior; con el before y el after

على التوالي لوضع مربع وضعنا موقف الأب: قريب ومن ثم بقية haiga أي مشكلة. وسنتخذ تلك البيئة

respectivamente para posicionarla le ponemos a la caja padre position: relative y después el resto no haiga ningún problema. Y le vamos a dar ese entorno que

كنت ترى طمس لها. 0 بكسل من التمرير الأفقي والرأسي التمرير بكسل 0، التردد 1 بكسل وهذه الإرادة

ustedes están viendo el difuminado que tiene; de 0 pixeles de desplazamiento horizontal, 0 pixeles de desplazamiento vertical, 1 pixel de difuminado y esto va

يكون لونه أسود. ثم جيدة مباشرة وسوف أضع سوداء، ولكن يمكنني أن طرح مع RGB، لكنها تبدو جيدة. تحديث ويوجد ل

a ser un color negro; entonces bueno directamente se lo voy a poner así un black, pero lo podría poner con el rgb, pero así queda bien. Actualizo y ahí lo

لدينا حتى الآن بوسو الماوس وليس هناك أي تأثير لا يوجد شيء، إلا أن أسلوب نبدأ القادمة من خلال الإدخال. حسنآ الان

tienen, así de momento poso el ratón y no hay ningún efecto no hay nada, solamente tenemos ese estilo iniciar que viene por entrada. Bueno pues ahora ya

دعونا نرى كيف نفعل ذلك. سأحاول شرح ذلك بسيطا قدر الإمكان، ولكن أتوقع أن هذا شيء معقد. ثم بدأنا. نحن

vamos a ver cómo hacemos esto. Voy a intentar explicárselo lo más sencillo posible, pero les anticipo que sí que es algo complejo. Entonces comenzamos. Ponemos

هنا المغفرة، والظل شعاعي على جزء من قبل، سأفعل معه من قبل ومن ثم تمرير ذلك إلى ما بعد هو بالفعل بسيط جدا لأن كل يسير جنبا إلى جنب.

aquí perdón, la sombra radial en la parte del before, lo voy hacer con el before y después pasarlo al after ya es muy sencillo porque va todo de la mano.

نحن هنا وضع المحتوى كما تعلمون، عليك أن تكون فارغة. نضع موقف في المطلق، في هذه الحالة، يمكن للموقف المطلق نحن

Aquí ponemos el content como ustedes ya saben, tiene que estar vacío; le ponemos el position en absolute, en este caso, el position absolute le vamos

القول بأن هذا قبل عرض كامل مربع الوالد، لذلك وضعنا 100٪ من العرض، نعطي مكان لارتفاع، لنبدأ

a decir que ese before sea toda la anchura de la caja padre, así que le ponemos el 100% de anchura, le damos a poner que tenga una altura, vamos a comenzar

كبيرة بالنسبة لك لمعرفة التأثير، فإننا سوف يقلل، ولكن لشرح كيفية القيام بذلك نصف الظل شعاعي، وضعنا المدخلات

grande para que ustedes vean el efecto, después se lo vamos a rebajar, pero para explicarle cómo hacer esa mitad de sombra radial, de entrada le ponemos

كبير ثم بالفعل منخفضة. ويقع إلى اليسار، والترقية، ليس لدي أي شيء، وسوف أضع خلفية: شبكة الخلفية. قمت بتحديث وهناك لديك

grande y después ya lo bajo; y lo posicionamos a la izquierda, actualizo, no tengo nada, le voy a poner un fondo: un background red. Actualizo y ahí lo tengo

حسنا حسنا هناك بالفعل، ما أقوم به الآن هو تحويل ما يصل، وسوف أضع القمة التي يصل أعلى، لذلك أنا وضعت في أعلى 0٪، قمت بتحديث هناك

bien Bueno ya está ahí, lo que voy hacer ahora es subirle, le voy a poner top que se suba arriba del todo, así que le voy a poner en el top el 0%, actualizo ahí

وأريد له أن يبقى فوق كل شيء، ثم. في الواقع، أريد القيام به هو ما يلي، بالنسبة لي هو قبل كل شيء، سوف أضع ذلك

Y yo quiero que se quede más arriba del todo, entonces. En realidad, quiero hacer es lo siguiente, para que se me quede por encima del todo, le voy poner que

هو ... أنا انظر هنا أضع 0٪ من القاع تتراجع في كل شيء، ولكنني وضعت 100٪، والجزء السفلي، إلا أنها تبقى فقط فوق القمة. هو

se esté… mire aquí le pongo un 0% del bottom se va abajo del todo, pero sí le pongo un 100%, del bottom, se queda justo por encima del top. Es un

قليل الحيلة لتتمكن من استخدامها. ذلك لا بد لي هناك. حسنا، كيف أفعل الآن لإظهار نصف القطع الناقص، حسنا ... نقوم به

pequeño truco para que ustedes lo usaran. Así que lo tengo ahí. Bueno, cómo hago ahora para que aparezca la mitad de una elipse, bien… vamos hacer lo

نظرة المقبل: انا ذاهب لوضع جانبا هنا، لأنه بعد هذا الرمز لدينا للمشاركة مع بعد، لذلك سوف أضع هنا بعيدا. فقط

siguiente miren: le voy a poner aquí aparte, porque después este código lo tenemos que compartir con el after, así que lo voy a poner aquí aparte; solamente

قبل وبعد ذلك الضعف ومع جزء من بعد. حسنا، هذا واحد هنا، ونحن سوف ننظر للقيام بما يلي: أعتقد ظلي هنا، وسوف أضع

del before y ya después lo duplicamos con la parte del after. Bien, este de aquí, le vamos hacer lo siguiente miren: yo aquí me creo mi sombra, voy a poner

هنا الخلفية، وكما تعلمون أن نضع: شعاعي الانحدار لأنها غير الخطية شعاعي الانحدار، والانحدار. وهنا نحن نذهب إلى القول بأن هذا

aquí el background, como ustedes ya saben le ponemos: radial gradient porque es un degradado radial no lineal, gradient. Y aquí le vamos a decir que esto una

القطع الناقص والألوان لديهم رغبا غير السوداء، ومن هنا صعوبة في الوسط، في وسط 0٪، من مركز خارج، ونحن سوف

elipse y que los colores que tiene el rgba es: un negro, aquí que es más duro en el centro, en el centro al 0%, desde el centro hacia fuera y lo vamos

التسمية، في وسط يحتوي على 0٪ ثم portion'm حافة سوف توضع على، لذلك أعتقد أنه من المفهوم على نحو أفضل، والجزء الحافة، و

nombrando, en el centro tiene un 0% y después en la parte del borde le voy a poner, así que creo que se entiende mejor, y en la parte del borde, ya hacia

ونحن ذاهبون لوضع الأسود، ولكن شفافة تماما، 0 شفافة تماما والتعتيم من 80٪، أيضا. دعونا نرى كيف يكون هذا

fuera le vamos a poner un negro, pero totalmente transparente, de 0 de opacidad totalmente transparente y ya a partir del 80%, bien. Vamos a ver cómo queda esto

والآن دعنا نذهب نرى تقدما تدريجيا. تحديث وهناك التي قدمت القطع الناقص من 20 بكسل عالية، في منتصف أسود و 80٪

y ahora vamos a ir viendo poco a poco el progreso. Actualizo y ahí tienen esa elipse que la hemos dado con 20 pixeles de altura, en el centro es negro y al 80%

ويصبح أكثر شفافية، وحسن. كيف لنا أن نفعل الآن؟ Fíjensen النحو التالي: لتحديد من القطع الناقص أن جزء فقط

ya se vuelve más transparente, bueno. ¿Cómo hacemos ahora? Pues fíjensen en lo siguiente: para poder seleccionar, de esa elipse que parte solamente

أتصور، هنا في القطع الناقص سأذهب يقول 50٪، من الوسط، من وسط ارتفاع لترتفع بنسبة 50٪، لا تصل إلى 100٪

quiero visualizar, aquí en la elipse le voy a decir que vaya del 50%, desde la mitad, desde la mitad de la altura que vaya al 50% hacia arriba, no hasta el 100%

القطع الناقص جيد وسوف نرى كيف يبدو 100٪؛ لو أنني وضعت هذا والتحديث، وأنا أراني النصف العلوي. ولكن أريد أن أذهب

de la elipse bueno vamos a ver cómo queda al 100%; sí yo pongo esto y actualizo, ven que se me muestra esa mitad superior; pero yo quiero que vaya

أكثر قد تصل إلى 150٪، لذلك ليس هناك المزيد من التردد، نرى أن يغير وجود القليل. وأكرر، وهذا هو 150٪ و 100٪ تبدو أكثر قتامة

más haya hasta el 150%, para que haya aún más el difuminado, ven que cambia un poco la presencia. Se lo repito, esto es al 150% y a 100% se ve más oscuro

انها مثل الذي تريده. سنترك أن يكون أكثر من اشعار قليلا، ولكن يمكن أن تضع أكثر متفوقة لجعلها تبدو أكثر التردد

Ya es como ustedes quieran. Lo vamos a dejarlo así para que se note un poco más, pero lo podría poner aún más superior para que se vea más el difuminado

وصلت إلى هناك، حقا، أن يحدث هذا 20 بكسل، إذا الآن هنا أقول 5 بكسل وترقية، نرى أن الظل هو مظلم جدا. لذلك كان لي 150٪

Lo tengo ahí, verdad, que pasa esto son 20 pixeles, si ahora yo aquí le digo 5 pixeles y actualizo, ven esa sombra queda muy oscura. Por eso yo lo tenía al 150%

الآن هناك إذا قمت بتحديث ويظهر لي أن الظل فقط الجزء العلوي، ورأوا كيف تم القيام به، قائلا أننا كنا أن نصف

ahora lo actualizo y ahí si se me muestra esa sombra solamente la parte de arriba, vieron cómo se ha hecho, diciéndole que nos quedamos con esa mitad

أكثر من 50٪ قبل، ولكن كذلك القطع الناقص أكثر صغيرتي 5 بكسل عالية، لدينا من أجل الخير هذا تكرار مع بعد، ثم

superior del 50% de adelante, pero ya así más chiquita la elipse con 5 pixeles de altura, pues bueno esto se lo tenemos que repetir con el after, entonces lo

سوف يجعل هو أن هذا القاع هذا الموقف فقط لمن قبل، ونحن سوف تفعل الشيء نفسه هنا، فإننا سوف يقولون ان هذا هو أيضا عن بعد

que voy hacer es que este bottom ese posicionamiento solamente para el before y vamos hacer lo mismo aquí, le vamos decir que esto sea también para el after

لذلك وضعنا، والظل شعاعي بعد هنا. وبالنسبة له بعد الذهاب إلى نسخ هذا، وأنا ذاهب إلى ضرب وسنقوم وضع بعد مختلفة، ونحن لن

así que le ponemos aquí, sombra radial after. Y para el after le voy a copiar esto, lo voy a pegar y el after lo vamos a posicionar diferente, no lo vamos a

طرح على الإطلاق ولكننا لن اخماد كل شيء، وبدلا من الذهاب نحو نصف سيذهب منتصف الطريق إلى أسفل، لذلك هنا أذهب

poner arriba del todo sino, lo vamos a poner a abajo del todo y en vez de ir de la mitad hacia arriba va a ir de la mitad hacia abajo, así que aquí le voy

وضع للانتقال من 50٪ إلى 50٪، وتحديث وأنه يوجد لديك. مهلا! لأن هنا اختفت إلى عفوا ... هذا هو بعد، نسخ كل شيء. تحديث هناك

a poner que vaya del 50% al -50%, actualizo y ahí lo tengo. ¡Hey! Porque aquí se me desapareció el… a perdón esto es el after, lo copie todo. Actualizo ahí

هم اثنين. وهو ما يحدث الآن، لأنني أريد أن أرى فقط عندما تشكل الماوس فوق، كيف لنا أن نفعل ذلك، والشفافية التمويه

están los dos. Que sucede ahora, pues yo quiero que solamente se vea cuando el ratón se pose por encima, cómo lo hacemos, camuflaje por transparencia

المدخلات ثم هنا انا اقول لكم ان التعتيم هو 0؛ والمدخلات والآن ما انا اقول لكم انه عندما يكون الماوس تشكل أعلاه في

entonces aquí de entrada le voy a decir que el opacity sea 0; así de entrada y ahora lo que le voy a decir que cuando se pose el ratón por encima, en el

الظل شعاعي في تحوم على قبل وبعد يوم، ولذا فإنني سوف نسخ هذا الخط، مهلا!، والغفران، وليس نسخة، الآن. لدي هنا

sombra-radial en el hover sobre el before y también sobre el after, así que le voy a copiar esta línea, ¡hey!, perdón, no la copie, ahora sí. Lo tengo aquí

اجتاحت قبل وبعد سوف نقوم بتغيير الشفافية إلى التعتيم 1 التحديث. المدخلات، وليس هناك شيء، أنا وضعت الماوس والأرض نفسها التي

sobro el before y sobre el after le vamos a cambiar la transparencia a opacity 1, actualizo. De entrada, no hay nada, poso el ratón y al posarse sí que se

ويظهر أنه ليس من المفاجئ، كما تعلمون نضع مدة المرحلة الانتقالية، مع المتصفح كود المنطقة التي تستخدمه، و

muestra y para que no sea brusco, como ustedes ya saben le ponemos el transition duration, con su prefijo del navegador que estén utilizando, se

وضعه إلى 3 ثوان لجعله تأثير سريع. حسنا هناك لديك، والظل شعاعي على مربع. حقا هذا التأثير، نعم أنا أحب جدا جدا

lo pongo a 3 segundos para que sea un efecto rápido. Pues ahí lo tienen, sombra radial sobre una caja. De verdad este efecto, sí que me gusta bastante es muy

مثيرة للاهتمام لماذا؟ لأنها معقدة، ونادرا ما يستخدم إلا نادرا، لذلك نعم يمكنك تنفيذ ذلك، وأنها ستكون من الأماكن القليلة التي لديها هذه

interesante ¿por qué? Porque es algo complejo, no se suele utilizar casi nunca, así que sí ustedes lo implementan, van a ser de los pocos sitios que tengan este

تأكد بالفعل أنهم لم يطلعوا عليه مرات عديدة، لأنه معقد من القطع الناقص وحدد فقط جزء للظهور

efecto Seguro que no lo han visto muchas veces, porque tiene está complejidad de partir la elipse y seleccionar solamente una parte para que se visualice

كما شرحت في هذه العملية، وليس كيف فعلنا هذا الجزء من هنا بنسبة 50٪ القطع الناقص صعودا وأكثر من 100٪، وأنا أعرف هذا

como yo os he explicado en el proceso, no, de cómo lo hemos hecho esta parte de aquí ellipse at del 50% hacia arriba e incluso más del 100%, ya sé que esto

لا يمكن لأحد ... عدد قليل من الناس يمكن أن نفكر أنه يمكن القيام به. وهذا الأخرى 50٪ إلى أقل من 0٪، 50٪ أقل أن يكون قليلا

a nadie se le… a pocas personas se le pueda ocurrir que se pudiera hacer. Y a esta otra del 50% hasta por debajo del 0%, un menos 50% para que tenga un poco

نفس التماثل أعلاه أثناء أدناه. ولما كان هذا تأثير مثير جدا للاهتمام، وآمل أن يكون الظل شعاعي المهتمين. حسنا اذن

la misma simetría tanto por arriba que por debajo. Pues este efecto es muy interesante, espero que te haya interesado sombra radial. Pues bueno

سنواصل مع المزيد من أشرطة الفيديو.

vamos a continuar con más vídeos.