سبد خرید

بستن سبد خرید

هیچ محصولی در سبد خرید نیست.

تعداد محصول: 0 کل قیمت: تومان0

پروژه Frosted glass effect : حالت شیشه ای زیبا

کدهای جذاب و دیدنی (Frosted glass effect) : حالت شیشه ای زیبا ، که در این پروژه به زبان های html , css را در اختیار شما و دانشجویان قرار می دهیم.

شاید شما هم از آن دسته افرادی باشید که دوست دارند وبسایت زیبا داشته باشند ولی به علت نداشتن مهارت فنی لازم، محدودیت‌هایی در این امر دارند. اصلا جای نگرانی نیست. برای طراحی یک سایت زیبا و چشم‌نواز اصلا نیازی به دانش «CSS» یا «PHP» ندارید، همین‌که مقدار کمی «HTML» مسلط باشید و عمل کپی پیست (Copy-Paste) را خوب بلد باشید، کفایت می‌کند.

من همیشه از اینکه می‌بینم چکارهایی با سی‌اس‌اس می‌ توان انجام داد، شگفت زده می‌شوم. توسعه دهندگان وب می‌دانند که با سی‌اس‌اس می‌توان لایه‌های خارق العاده و انیمیشن های سفارشی زیبایی را ساخت.

کد حالت شیشه ای زیبا

تا حالا صفحه ای دیدید که در بعضی از رویداد ها حالت شیشه ای دارد که در تصویر زیر نمونه ای از حالت شیشه ای می باشد.

در این قسمت کد ( Frosted glass effect ) جالب و همچنین پروژه‌ی برنامه را در اختیار شما قرار دادیم.

همانطور که می بینید یک حالت شیشه ای زیبا ساخته شده است. کافیست کدهای html و css در این برنامه به کار ببرید که نمونه ی کدها را برای شما قرار دادیم و استفاده کنید.

کدهای HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShahCode.com - Frosted glass effect with CSS &amp; SVG</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="header glass">
        <h1>CAT</h1>
    </div>
</body>
</html>

 

کدهای CSS:

@import url(https://fonts.googleapis.com/css?family=Megrim&text=CAT);
html {
    background-image: url("https://placekitten.com/1920/1120");
    background-position: center bottom;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    font-size: 100%;
}

body {
    margin: 0;
}

.glass {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid;
    border-bottom-color: #ccc;
    border-bottom-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    height: 180px;
}

.glass::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%221920%22%20height%3D%221120%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cimage%20xlink%3Ahref%3D%22http%3A%2F%2Fplacekitten.com%2F1920%2F1120%22%20width%3D%221920%22%20height%3D%221120%22%20filter%3D%22url%28%23blur%29%22%2F%3E%3C%2Fsvg%3E"), url("https://placekitten.com/1920/1120");
    background-position: center bottom;
    background-attachment: fixed;
    background-size: cover;
    content: "";
    filter: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#blur");
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.glass .legacy-ie-fix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

.glass h1 {
    position: relative;
    margin: 0;
    color: #fff;
    color: rgba(255, 255, 255, 0.3);
    font-size: 180px;
    font-weight: normal;
    font-family: "Megrim", sans-serif;
    line-height: 1;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}

@media only screen {
    .glass h1 {
    -ms-filter: "none";
    }
}

 

پروژه این برنامه را در اختیار شما قرار دادیم و می توانید دانلود کنید.

امیدوارم لذت برده باشید.

دانلود رایگان فایل

برای مشاهده لینک دانلود لطفا وارد حساب کاربری خود شوید!

پست های مشابه

19تیر 1400

CSS چیست و نقش آن در طراحی وب سایت که در این پست، طراحی و ساخت سایت را توضیح می دهیم، پس با ما همراه باشید. امروزه نرم افزارهایی برای طراحی وب سایت پدید آمده است که این امکان را می دهد که حتی بدون نیاز به دانش برنامه نویسی وب سایتی تولید و توسعه […]

265

0

28خرداد 1400

نمایش لودینگ یا نوار بارگذاری با CSS ، در این مقاله نحوه ی پروژه ایجاد لودینگ یا نوار بارگذاری کامل صفحه وب که با CSS نوشته شده را توضیح میدهیم.نمایش لودینگ صفحه یا بارگذاری کامل آن Preloader

481

0

27خرداد 1400

این پروژه ی بوم برخورددهنده به این صورت است که وقتی بوم ها یا مربع ها باهم برخورد می کنند…

178

0

دیدگاه و پرسش