أكواد css جاهزة سلة

Abdallah Fathy Fathy ·

21 min read

Posted: 08 Sep, 2024

تسهم أكواد css جاهزة سلة في إضفاء التغييرات المطلوبة والتنسيقات على الموقع الالكتروني أو المتجر من حيث الألوان والخطوط والثبات وغيرها من تنسيقات موقع الويب التي يتم إجراؤها عن طريق لغة البرمجة css وهي اللغة المسؤولة عن ذلك لإضفاء هوية بصرية مميزة على موقعك الالكتروني أو المتجر خاصتك وفي هذا المقال سنقدم لك مجموعة من أكواد css جاهزة سلة لتقوم بتنسيق مكونات موقعك بسهولة من خلالها ولكن يجب أن تكون على دراية بهذه اللغات البرمجية حتى لا تتسبب في إيقاف بعض المهام أو تعطل الموقع والمتجر الإلكتروني.

أكواد css جاهزة سلة

تعتبر لغة CSS هي اختصار لمصطلح Cascading Style Sheets

وتستخدم هذه اللغة في تصميم التنسيقات المتعلقة بالمتجر أو موقع الويب وجعله أكثر جاذبية، إذ يتم من خلالها التحكم في أنماط الخطوط والوان النصوص وصور الخلفيات وألوانها بالإضافة إلى التنسيقات المتعلقة بالفقرات والمسافات والتباعد بين الفقرات وغيرهم من التنسيقات الأخرى، وفي السطور التالية سنقدم لكم أكواد css جاهزة سلة للتعديل على مظهر الموقع والتنسيقات الخاصة به:

كود css جاهز لتغيير لون خلفية الموقع إلى اللون الأسود

يمكن استخدام هذا الكود ليصبح لون الخلفية الخاصة بموقعك أو متجرك باللون الأسود فكل ما عليك هو نسخ الكود ولصقه في المكان المخصص للتعديل على مظهر وثيمات الموقع:

/*كود تغيير لون الخلفية*/

body {

background-color: black;

}

كود تصميم هيدر احترافي

يمكن تصميم هيدر احترافي وجذاب عن طريق كود جاهز مصمم بلغة cssكما يلي:

@import url('https://fonts.googleapis.com/css?family=El+Messiri');

html, body {

height: 100%;

padding: 0;

margin: 0;

}

body {

font-family: 'El Messiri', sans-serif;

background: #444444;

}

#header {

background: url(https://i.imgur.com/ZmrjWRm.jpg) no-repeat center top;

background-size: cover;

position: fixed;

height: 90%;

bottom: 10%;

right: 0;

left: 0;

top: 0;

}

#header .center {

background: rgba(0, 0, 0, 0.25);

text-align: center;

position: absolute;

color: #FFFFFF;

color: #F5F7FA;

bottom: 0;

right: 0;

left: 0;

top: 0;

}

#header .center .middle {

position: absolute;

margin-top: -8em;

right: 0;

left: 0;

top: 50%;

}

#header .center .middle h1 {

font-family: 'El Messiri', sans-serif;

font-weight: normal;

line-height: 1em;

font-size: 11em;

margin: 0;

text-shadow: -3px 13px 18px black;

}

#header .center .middle span {

line-height: 5em;

font-size: 1em;

}

#pageHr {

background: #FFFFFF;

position: relative;

height: 5px;

display: block;

right: 0px;

left: 0px;

top: 90%;

z-index: 1;

}

#pageHr > i {

margin: -25px;

border: 5px solid #FFFFFF;

height: 40px;

width: 40px;

background: #3c4e69;

position: absolute;

display: block;

left: 50%;

top: 50%;

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

#pageHr > i > i {

font-family: 'El Messiri', sans-serif;

line-height: 36.8px;

font-size: 20px;

height: 40px;

width: 40px;

text-align: center;

position: absolute;

color: #FFFFFF;

display: block;

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

#page {

background: #3c4e69;

position: relative;

height: 123.45%;

top: 90%;

}

كود تدوير النص

من أكواد css الجاهزة المستخدمة في إنشاء تدوير النص الكود التالي:

@import url(https://fonts.googleapis.com/css?family=Lato:600);

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #222;

}

.rotating-text {

font-family: Lato, sans-serif;

font-weight: 600;

font-size: 36px;

color: white;

transform: translateX(-80px);

p {

display: inline-flex;

margin: 0;

vertical-align: top;

.word {

position: absolute;

display: flex;

opacity: 0;

.letter {

transform-origin: center center 25px;

&.out {

transform: rotateX(90deg);

transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);

}

&.in {

transition: 0.38s ease;

}

&.behind {

transform: rotateX(-90deg);

}

// palette: https://flatuicolors.com/palette/defo

.alizarin {

color: #e74c3c;

}

.wisteria {

color: #8e44ad;

}

.peter-river {

color: #3498db;

}

.emerald {

color: #2ecc71;

}

.sun-flower {

color: #f1c40f;

}

كود انشاء واجهة متحركة للموقع

لإضافة واجهة ويب متحركة باستخدام لغة css البرمجة يمكن اتباع هذا الكود التالي:

@font-face {

font-family: 'Hurme';

src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff2') format('woff2'),

url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff') format('woff');

font-weight: bold;

font-style: normal;

}

.content {

z-index: 2;

position: absolute;

background: red;

top: 100%;

}

$blue: #07101d;

$yellow: #ffdc25;

$globalPadding: 40px;

.dynamicCursor {

// transform-origin: 270px 0;

}

* {

box-sizing: border-box;

}

body {

background: $blue;

background-size: cover !important;

font-family: 'Hurme';

font-weight: 500;

user-select: none;

margin: 0;

padding: $globalPadding;

height: 100vh;

iframe {

opacity: 0;

animation: fadeInVid 1s 1s forwards;

}

.portfolio {

.slider_note {

width: 100%;

position: absolute;

color: black;

left: 0;

top: 640px;

z-index: 2;

text-align: center;

}

.slideClone {

width: 700px;

height: 450px;

margin: 0 auto;

top: 160px;

display: none;

position: fixed;

left: 0;

transition: all .5s;

right: 0;

.overlay,

.cats,

.title {

opacity: 1 !important;

}

.button {

display: none;

}

.title {

font-weight: 800;

color: $yellow;

position: relative;

z-index: 10;

font-size: 22px;

transform-style: preserve-3d;

left: 0;

}

.f {

position: relative;

top: 0;

transition: all .7s .0s cubic-bezier(0.79, -0.01, 0, 0.99);

}

.image {

position: relative;

margin-top: 10px;

padding: 94px 94px;

height: 380px;

transform-style: preserve-3d;

img {

position: absolute;

left: 0;

z-index: -1;

top: 0;

transition: all .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);

height: 100%;

}

.overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(11, 18, 27, 0.6);

z-index: -1;

opacity: 0;

transition: opacity .1s, transform .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);

}

.cats {

color: $yellow;

font-weight: 700;

font-size: 12px;

transform-style: preserve-3d;

opacity: 0;

left: 0;position: relative;

transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);

}

.title {

font-weight: 800;

color: white;

width: 350px;

font-size: 28px;

margin-top: 10px;

line-height: 35px;

transform-style: preserve-3d;

position: relative;

transition: all 0.6s .2s;

margin: 22px 0 16px 0;

opacity: 0;

}

.button {

color: $blue;

font-size: 14px;

cursor: pointer;

margin-top: 14px;

background: $yellow;

float: left;

padding: 12px 20px;

transform-style: preserve-3d;

position: relative;

transition: all .6s .3s;

opacity: 0;

}

&_home {

&__work {

background: transparent;

padding: 40px;

position: fixed;

width: 100%;

z-index: 3;

position: fixed;

height: 100%;

pointer-events: none;

opacity: 0;

top: 0;

z-index: 4;

left: 0;

clip-path: polygon(calc(50% - 353px) 613px, calc(50% + 359px) 613px, calc(50% + 359px) 226px, calc(50% - 353px) 225px);

transition: opacity .5s .67s, -webkit-clip-path .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);

&.expand {

clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0%);

pointer-events: all;

opacity: 1;

transition: opacity .1s, -webkit-clip-path .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);

.scroll {

opacity: 1;

transition: all 0.8s 0.5s;

}

.slideClone {

img {

transition: all .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);

transform: scale(2.9)

}

.overlay {

transition: opacity .1s, transform .8s .23s cubic-bezier(0.79, -0.01, 0, 0.99);

transform: scale(2.9)

}

.title.f {

position: relative;

top: 72px;

left: 0;

transition: all .8s .4s cubic-bezier(0.79, -0.01, 0, 0.99);

}

.cats, .title {

left: -93px;

position: relative;

}

.cats {

transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);

}

.title {

transition: all .8s .19s cubic-bezier(0.79, -0.01, 0, 0.99);

}

&__slider{

position: relative;

transform: translateX(-800px);

perspective: 900px;

perspective-origin: 50% 200px;

& .slider {

&_inner {

transform: translateY(120px);

position: absolute;

left: 0;

right: 0;

width: 30000px;

transition: all 0.8s cubic-bezier(0, 0.6, 0.25, 1);

transform-style: preserve-3d;

pointer-events: none;

&.in {

pointer-events: all;

.slider_inner__slide {

animation: sliderIn 1.1s .65s cubic-bezier(0.79,-0.01, 0, 0.99) forwards;

}

&__slide {

width: 700px;

height: 750px;

float: left;

margin-right: 60px;

transition: all .5s;

transform-style: preserve-3d;

transform: scale(0);

.title {

font-weight: 800;

color: #060608;

position: relative;

font-size: 22px;

transform-style: preserve-3d;

}

&:nth-of-type(2){

.image {

.overlay,

.cats,

.title,

.button {

opacity: 1;

}

.image {

position: relative;

margin-top: 10px;

padding: 94px 94px;

height: 380px;

transform-style: preserve-3d;

img {

position: absolute;

left: 0;

z-index: -1;

top: 0;

height: 100%;

}

.overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(11, 18, 27, 0.7);

z-index: -1;

opacity: 0;

transition: opacity .1s, transform .8s .7s cubic-bezier(0.79, -0.01, 0, 0.99);

}

.cats {

color: $yellow;

font-weight: 700;

font-size: 12px;

left: 0;

transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);

transform-style: preserve-3d;

opacity: 0;

}

.title {

font-weight: 800;

color: white;

width: 350px;

font-size: 28px;

margin-top: 10px;

line-height: 35px;

transform-style: preserve-3d;

position: relative;

transition: all 0.6s .2s;

margin: 22px 0 16px 0;

opacity: 0;

}

.button {

color: $blue;

font-size: 14px;

cursor: pointer;

margin-top: 14px;

background: $yellow;

float: left;

padding: 12px 40px 14px 20px;

transform-style: preserve-3d;

position: relative;

transition: all .6s .3s;

opacity: 0;

img {

width: 14px;

height: auto;

position: absolute;

right: 17px;

left: auto;

top: 16px;

}

&__header {

float: right;

width: 100%;

&.work {

position: relative;

z-index: 1;

ul li {

color: #fff;

&.active {

border-bottom: 2px solid $yellow;

color: $yellow;

}

ul {

padding: 0;

margin: 0;

li {

display: inline;

margin-right: 10px;

&.active {

font-size: 20px;

border-bottom: 2px solid $blue;

}

&:hover {

border-bottom: 2px solid $blue;

}

.nav {

position: absolute;

left: 0;

right: 0;

margin: auto;

width: 400px;

padding: 0;

}

& .logoMain {

float: left;

position: relative;

top: -3px;

width: 280px;

img {

width: 100% !important;

animation: none !important;

opacity: 1 !important;

}

& .number {

color: white;

-webkit-animation: fade 1s 2.3s forwards;

animation: fade 1s 2.3s forwards;

opacity: 0;

float: right;

position: relative;

margin-right: 80px;

top: 5px;

&.black {

color: $blue;

animation: none;

opacity: 1;

}

&.white {

color: #fff;

animation: none;

opacity: 1;

}

& .hamburger {

float: right;

position: absolute;

right: $globalPadding;

top: 45px;

animation: fade 1s 2.3s forwards;

opacity: 0;

height: 20px;

width: 30px;

&.black {

opacity: 1 !important;

.hamburger_part {

background: $blue;

}

&.white {

opacity: 1 !important;

right: 0;

top: 5px;

.hamburger_part {

background: $yellow;

}

&_part {

$hamburgerPartHeight: 2px;

width: 30px;

height: $hamburgerPartHeight;

position: absolute;

background: $yellow;

right:0;

@for $i from 1 through 3 {

&:nth-of-type(#{$i}) {

top: ($hamburgerPartHeight + 2) * 2 * ($i - 1);

}

&:last-child {

width: 20px;

}

&__title {

position: absolute;

bottom: $globalPadding * 2;

left: $globalPadding * 2;

max-width: 460px;

.logo {

margin-bottom: 30px;

img.first {

margin-right: 0px;

position: relative;

top: 3px;

width: 135px;

opacity: 0;

-webkit-animation: fade 1s 1s forwards;

animation: fade 1s 1s forwards;

&.out {

animation: fadeOut .4s .6s forwards;

opacity: 1;

}

img.second {

width: 140px;

animation: spark 1.3s 1.1s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;

clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);

}

hr {

width: 80px;

background: $yellow;

height: 2px;

border: none;

position: absolute;

left: 0;

width: 0;

top: 77px;

animation: hr 1.3s 1.4s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;

&.out {

animation: hrOut .4s .4s forwards;

width: 70px;

}

.trigger {

opacity: 0;

animation: fade 1s 2.5s forwards;

&.out {

animation: fadeOut .4s 0s forwards;

}

h1 {

color: white;

margin-top: 60px;

line-height: 30px;

font-weight: normal;

font-size: 18px;

opacity: 0;

margin-bottom: 30px;

animation: fade 1s 1.9s forwards;

&.out {

animation: fadeOut .4s .2s forwards;

opacity: 1;

}

span {

color: $yellow;

}

& .page {

&_portfolio {

background: $yellow;

padding: $globalPadding;

position: fixed;

width: 100%;

z-index: 3;

position: fixed;

height: 100%;

opacity: 0;

top: 0;

left: 0;

clip-path: polygon(226px calc(100% - 262px), 359px calc(100% - 262px), 359px calc(100% - 309px), 226px calc(100% - 309px));

transition: opacity .6s 0.2s , clip-path 1s .6s cubic-bezier(0.79,-0.01, 0, 0.99);

}

@keyframes sliderIn {

from { transform: scale(0);}

to{ transform: scale(1);}

}

@keyframes fade {

from {opacity: 0}

to {opacity: 1}

}

@keyframes fadeOut {

from {opacity: 1}

to {opacity: 0}

}

@keyframes fadeInVid {

from {opacity: 0}

to {opacity: 0.1}

}

@keyframes hr {

from {width: 0;}

to {width: 70px;}

}

@keyframes hrOut {

from {width: 70px;}

to {width: 0px;}

}

@keyframes spark {

from {clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);}

to {clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);}

}

.scroll {

position: absolute;

left: calc(50% - 348px);

top: 458px;

transition: all 0.8s 0s;

opacity: 0;

}

.back {

position: absolute;

height: 100vh;

img {

animation: none !important;

opacity: 1 !important;

transform: rotate(90deg);

bottom: 73px !important;

position: absolute;

}

لماذا تحتاج إلى أكواد css جاهزة سلة؟

قد يحتاج أصحاب المواقع الالكترونية هذه الاكواد للحصول على الكثير من المزايا التي تتضمن ما يلي:

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

مزايا تصميم متاجر سلة عبر أكواد css جاهزة

يجب أن يكون هناك فريق محترف ومتخصص في استخدام هذه الأكواد البرمجية التي تحدث تغييرات جذرية على مظهر وشكل الموقع الالكتروني لذا يقوم المتخصص باستخدام أكواد CSS للتعديل بما يتوافق مع علامتك التجارية.
طريقة بسيطة لتغيير الألوان، والخطوط.
إمكانية تكبير أو تصغير الشعار أو اللوجو الخاص بالموقع الإلكتروني.
تنسيق الهيدر وتغيير لونه بسهولة عبر أكواد css.
التعديل على حجم النص في جميع الصفحات الخاصة بالمتجر.
تعديل شكل الأيقونات وإضافة أيقونات أخرى للتواصل.
إمكانية إخفاء عناصر أو إضافة عناصر أو تعديل القائمة الجانبية.

Posted: 08 Sep ,2024

Abdallah Fathy Fathy

Read Also

Laying the Foundation: How Code95 is Building Success in the Construction Sector

In the world of construction, every project starts with a solid foundation. The same is true in the digital realm—where a well-built website serves as the cornerstone of success. At…...

We Don’t Just Build Apps and Websites — We Create Exceptional Financial Experiences

At Code95, we don’t just create apps and websites—we craft digital experiences tailored specifically for the financial sector. Our solutions are designed to do more than just function; they enhance…...

Code95 Transforming the Automotive Sales Experience

Discover Our Innovative Automotive Web & App Solution In today's fast-paced digital world, having an online presence is no longer a luxury but a necessity. For the automotive industry, showcasing…...

مزايا المتجر

مزايا المتجر الإلكتروني والفرق بينه وبين المتجر الواقعي على الأرض حيث يعتبر المتجر الإلكتروني هو بوابة الدخول إلى التجارة الحديثة حيث تشهد حياتنا اليوم تحول كبير في وسائل التسوق وطرقها…...

شركة برمجة تطبيقات في جدة

تتزايد الحاجة الى شركة برمجة تطبيقات في جدة مع تزايد استخدام تطبيقات الجوال والبرامج الذكية التي تخدم المواطنين في عدة مجالات خلال الحياة اليومية، ففي كل يوم جديد يتم ابتكار…...

منصة الكترونية

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

Testimonial “A professional, nice to work with a bunch of people that will add value in any project they work on.” Passant Fouad, Juhayna “Perfect support, outstanding calibres. We as an organization consider them a great partner.” AttijariWafa Bank “Code95 is comprised of a dynamic, energetic and dedicated team that has helped us in realising our vision for the website we wanted to create. They are very flexible and work round the clock to ensure the process is going smoothly. They are creative and experienced and able to handle big tasks and projects. It was a pleasure to work with them and we look forward to continuing this relationship in future endeavours.” Abdel-Rahman Hussein, Dandin “By the end of a very long timeline project full of energy, stress, quality, dedication, long sleepless nights, day to day support even on weekends & public holidays & a perfect project delivery, I would like first to thank each & everybody who gave the energy & dedication to this project leaving family & personal life to provide such a service. I would like also to inform you that our work especially the website has been recognized from the highest levels in the government & everyone we meet during the event give us the credit over it, so I loved to share this with you guys this would never be done without your great support all over the last months. We as JWT appreciate the relationship with your end & wishing to have more & more business together for the upcoming months. “THANK YOU ALL, Ahmed Helal , JWT

Let’s talk

Want to have a talk with us? We respond in a few minutes. Try and say Hi!

Say Hi!