أكواد css جاهزة سلة
Abdallah Fathy Fathy
·
Posted: 27 Feb, 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: 27 Feb, 2024
Abdallah Fathy Fathy
Read Also
مزايا المتجر الالكتروني
وصف متجر إلكتروني جاهز
مميزات المتجر الالكترونى
تصميم متجر الكتروني جاهز
الفرق بين الموقع الالكتروني والمتجر الالكتروني
