بىلىملەر مۇنبىرى

 پارول قايتۇرىۋېلىش
 تىزىملىتىڭ
جەمئىي مىكروبلوگ 258 تال  

مىكروبلوگ[ يېڭى | 24 سائەت | 7 كۈن | 30 كۈن ]

كۆرۈش: 314|ئىنكاس: 3

[HTML/CSS] css تىكى كۆپ قوللىنىلىدىغان ئالاھىدە ئۈنۈملەر.

[ئۇلانما كۆچۈرۈش]

بىكەتكە ئەزا نامىڭىز بىلەن كىرسىڭىز تېخىمۇ كۆپ ئۇچۇرلارنى كۆرەلەيسىز

مۇنبىرىمىزگە تىزىملىتىپ كىرسىڭىز ئاندىن قوشۇمچە ھۆججەتنى كۆرەلەيسىز ياكى چۈشۈرەلەيسىز . تېخى تىزىملاتمىغانمۇ؟ تىزىملىتىڭ

x
سالام بىلىملەر مۇنبىرىدىكى دوسلار ياخشىمۇ سىلەر، مەن بۈگۈن سىلەرگە css تىنلا پايدىلىنىپ ئىشقا ئاشۇرۇلغان بىرقىسىم ئالاھىسە ئۈنۈملەرنى ئېلىپ كەلدىم، بۇ ئۈنۈملەر ھەممىس ھەركەتلىك، gif رەسىم ياساش قۇلايسىز بولغاچقا ئادەتتىكى ئۈنۈم رەسىمىنىمۇ بولسا يازمىغا قىستۇراي دىگەن، لىكىن بىر مۇنچە ھەپىلىشىپمۇ رەسىملەرنى قىستۇرالمىدىم شۇڭا توغرا چۈشەنگەن بولساڭلا، تۆۋەندە ھەر بىر ئۈنۈمنىڭ html كودى تەمىنلەندى.

1. مائۇسنى ئۈستىگە ئەكەلگەندە نۇر چاچىدىغان ئۈنۈم
  1. <!DOCTYPE html>

  2. <head>
  3.    <title>yankut saloni</title>
  4.    <style>
  5.        .base-btn {
  6.            display: flex;
  7.            align-items: center;
  8.            justify-content: space-around;
  9.            height: 100vh;
  10.            background: #031628;
  11.       }
  12.       
  13.        .btn {
  14.            border: 1px solid;
  15.            background-color: transparent;
  16.            text-transform: uppercase;
  17.            font-size: 14px;
  18.            padding: 10px 20px;
  19.            font-weight: 300;
  20.       }
  21.       
  22.        .one {
  23.            color: #4cc9f0;
  24.       }
  25.       
  26.        .one:hover {
  27.            color: white;
  28.            border-color: #4cc9f0;
  29.            background-color: #4cc9f0;
  30.            -webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
  31.            -moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
  32.            box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
  33.       }
  34.       
  35.        .two {
  36.            color: #f038ff;
  37.       }
  38.       
  39.        .two:hover {
  40.            color: white;
  41.            border-color: #f038ff;
  42.            background-color: #f038ff;
  43.            -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  44.            -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  45.            box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  46.       }
  47.       
  48.        .three {
  49.            color: #b9e769;
  50.       }
  51.       
  52.        .three:hover {
  53.            color: white;
  54.            border-color: #b9e769;
  55.            background-color: #b9e769;
  56.            -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  57.            -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  58.            box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  59.       }
  60.    </style>
  61. </head>

  62. <body>
  63.    <div class="base-btn">
  64.        <button class="btn one">Hover one</button>
  65.        <button class="btn two">Hover two</button>
  66.        <button class="btn three">Hover three</button>
  67.    </div>
  68. </body>

  69. </html>
مەزمۇننى كۆچۈرۈۋېلىش


2.مائۇسنى ئۈستىگە ئېلىپ كەلگەندە ئەتراپىدا بىر رامكا ئالدىرىماي سىزىلىدىغان ئۈنۈم
  1. <!DOCTYPE html>

  2. <head>
  3.    <title>yankut</title>
  4.    <style>
  5.        #container {
  6.            display: flex;
  7.            align-items: center;
  8.            justify-content: center;
  9.            height: 100vh;
  10.            background-color: #031628;
  11.       }
  12.       
  13.        button {
  14.            border: 0;
  15.            background: none;
  16.            text-transform: uppercase;
  17.            color: #f038ff;
  18.            font-weight: bold;
  19.            position: relative;
  20.            outline: none;
  21.            padding: 10px 20px;
  22.            box-sizing: border-box;
  23.       }
  24.       
  25.        button::before,
  26.        button::after {
  27.            box-sizing: inherit;
  28.            position: absolute;
  29.            content: "";
  30.            border: 2px solid transparent;
  31.            width: 0;
  32.            height: 0;
  33.       }
  34.       
  35.        button::after {
  36.            bottom: 0;
  37.            right: 0;
  38.       }
  39.       
  40.        button::before {
  41.            top: 0;
  42.            left: 0;
  43.       }
  44.       
  45.        button:hover::before,
  46.        button:hover::after {
  47.            width: 100%;
  48.            height: 100%;
  49.       }
  50.       
  51.        button:hover::before {
  52.            border-top-color: #f038ff;
  53.            border-right-color: #f038ff;
  54.            transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
  55.       }
  56.       
  57.        button:hover::after {
  58.            border-bottom-color: #f038ff;
  59.            border-left-color: #f038ff;
  60.            transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
  61.       }
  62.    </style>
  63. </head>

  64. <body>
  65.    <div id="container">
  66.        <button>Hover me</button>
  67.    </div>
  68. </body>

  69. </html>
مەزمۇننى كۆچۈرۈۋېلىش

3.مائۇسنى ئۈستىگە ئېلىپ كەلگەندە قىرى ئالدىرىماي يۇمۇلاقلىشىدىغان ئۈنۈم
  1. <!DOCTYPE html>

  2. <head>
  3.    <title>yankut</title>
  4.    <style>
  5.        .border-btn {
  6.            display: flex;
  7.            align-items: center;
  8.            justify-content: center;
  9.            height: 100vh;
  10.            background-color: #031628;
  11.       }
  12.       
  13.        button {
  14.            border: 0;
  15.            border-radius: 10px;
  16.            background: #2ec4b6;
  17.            text-transform: uppercase;
  18.            color: white;
  19.            font-size: 16px;
  20.            font-weight: bold;
  21.            padding: 15px 30px;
  22.            outline: none;
  23.            position: relative;
  24.            transition: border-radius 3s;
  25.            -webkit-transition: border-radius 3s;
  26.       }
  27.       
  28.        button:hover {
  29.            border-bottom-right-radius: 50px;
  30.            border-top-left-radius: 50px;
  31.            border-bottom-left-radius: 10px;
  32.            border-top-right-radius: 10px;
  33.       }
  34.    </style>
  35. </head>

  36. <body>
  37.    <div class="border-btn">
  38.        <button>Hover me</button>
  39.    </div>
  40. </body>

  41. </html>
مەزمۇننى كۆچۈرۈۋېلىش

مائۇسنى ئۈستىگە ئېلىپ كەلگەندە مۇز تۇتقاندەك بولىدىغان ئۈنۈم
  1. <!DOCTYPE html>

  2. <head>
  3.    <title>yankut</title>
  4.    <style>
  5.        .frozen-btn {
  6.            display: flex;
  7.            align-items: center;
  8.            justify-content: center;
  9.            height: 100vh;
  10.            background-color: #031628;
  11.       }
  12.       
  13.        button {
  14.            border: 0;
  15.            margin: 20px;
  16.            text-transform: uppercase;
  17.            font-size: 20px;
  18.            font-weight: bold;
  19.            padding: 15px 50px;
  20.            border-radius: 50px;
  21.            color: white;
  22.            outline: none;
  23.            position: relative;
  24.       }
  25.       
  26.        button:before {
  27.            content: "";
  28.            display: block;
  29.            background: linear-gradient( to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
  30.            background-size: 210% 100%;
  31.            background-position: right bottom;
  32.            height: 100%;
  33.            width: 100%;
  34.            position: absolute;
  35.            top: 0;
  36.            bottom: 0;
  37.            right: 0;
  38.            left: 0;
  39.            border-radius: 50px;
  40.            transition: all 1s;
  41.            -webkit-transition: all 1s;
  42.       }
  43.       
  44.        .green {
  45.            background-image: linear-gradient(to right, #25aae1, #40e495);
  46.            box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
  47.       }
  48.       
  49.        .purple {
  50.            background-image: linear-gradient(to right, #6253e1, #852d91);
  51.            box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
  52.       }
  53.       
  54.        .purple:hover:before {
  55.            background-position: left bottom;
  56.       }
  57.       
  58.        .green:hover:before {
  59.            background-position: left bottom;
  60.       }
  61.    </style>
  62. </head>

  63. <body>
  64.    <div class="frozen-btn">
  65.        <button class="green">Hover me</button>
  66.        <button class="purple">Hover me</button>
  67.    </div>
  68. </body>

  69. </html>
مەزمۇننى كۆچۈرۈۋېلىش


بۈگۈنچە مۇشۇنداراق يوللاپ تۇراي ئەتە يەنە بىر بۆلەك يوللىنىدۇ،  سالونىمىزنى قۇشۋېلىش ئارقىلىق مۇ it تېخنىكىلىرى، كومپىيوتىر يۇمشاق دىتاللىرى، پىروگگىرامما تىلى بىلىملىرى قاتارلىق تىمىلاردىن بەھرىمان بولالايسىز.
بىلمىگەننى بىلىملەردىن بىل!
 ئىگىسى| ۋاقتى: 2021-2-17 15:40:34 يانفوندا يوللانغان | ھەممە قەۋەتنى كۆرۈش
سالون ئىزدەش نامى yankut
بىلمىگەننى بىلىملەردىن بىل!
ۋاقتى: 2021-2-17 20:15:04 | ھەممە قەۋەتنى كۆرۈش
ئىزدەپ تاپالمىغان كودلاركەن،  مۇشۇنداق ئېسل بىلبىملەرنىنى داۋاملىق يوللىغايسىز!
بىلمىگەننى بىلىملەردىن بىل!
ۋاقتى: 2021-2-17 20:15:43 | ھەممە قەۋەتنى كۆرۈش
مائۇسنى ئەكەلگەندە رەڭ ئۆزگەرتىش،  ئالدىغا كەينىگە مىدىرايدىغان كودلار بولسا يوللىۋەتسىڭىز!
بىلمىگەننى بىلىملەردىن بىل!
كىرگەندىن كېيىن ئىنكاس يازالايسىز كىرىش | تىزىملىتىڭ

سەھىپە جۇغلانما قائىدىسى

QQ|قاماقخانا|رەسىمسىز ھالەت|يانفۇن| بىلىملەر تورى ( 沪ICP备19027845号-8 )   

GMT+8, 2021-2-27 15:13 , Processed in 0.069983 second(s), 25 queries .

Powered by Discuz! X3.2(NurQut Team)

© 2001-2013 Comsenz Inc.

تېز ئىنكاس چوققىغا قايتىش سەھىپىگە قايتىش