每个开发人员都应该知道的 5 种惊人的 CSS 样式

CSS（层叠样式表）帮助开发者增强网页的视觉外观，换句话说，我们可以说 CSS 为网页增添了生命力并美化了它。使用 CSS，我们可以更改布局、颜色、字体、图像，最好的部分是对于特定的样式或布局，我们可以编写一次代码，并在我们想要在我们的网站上实现它时多次使用它，这是非常有利又省时。

在这里，我们将讨论 5 个可以让您的网站脱颖而出的 CSS 技巧。

1. 自定义光标：每次都使用同一个普通光标感到无聊吗？如果您可以根据自己的意愿自定义光标怎么办？想象一下有你的图像或独特的东西的光标？听起来很酷吧？这可以通过在一行代码中使用 CSS 来完成。在下面的示例中，我们为光标使用了三种不同的图像：GeeksforGeeks 徽标、奶酪图像和火箭，您可以使用任何您选择的图像。

cursor: url("anyimage.png"), pointer;

例子：

index.html

  

    
    

  

    

        GFG Cursor
        Cheese Cursor
        Rocket Cursor
   

  

样式文件

body {
    background-color: pink;
    padding: 0;
    margin: 0;
}
.container {
    width: 690px;
    height: 220px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
button {
    font-size: 30px;
    background-color: white;
    border: none;
    outline: none;
    text-transform: uppercase;
    color: black;
    width: 200px;
    padding: 20px;
    padding-left:40px; 
    padding-right:40px;
}
button:nth-child(1) {
cursor: url("gfg.png"),pointer;
}
button:nth-child(2) {
cursor: url("cheese.png"),pointer;
}
button:nth-child(3) {
cursor: url("rocket.png"),pointer;
}

输出：

使用任何所需图像作为光标的限制：

• 可以使用任何图像格式，如 JPG、PNG 或 BMP
• 图像大小应为32×32px ，任何大于此大小的图像都将不起作用。

2. 阴影效果：阴影效果是一种非常简单但令人惊叹的效果，它为我们的文字提供了 3D 触感。

h1 {
    font-size: 5rem;
    text-shadow: 5px 5px 0px green;
}

例子：

HTML

  

    
    

  

    
GeeksforGeeks

  

输出：

3. 彩色滤镜：无需使用任何编辑工具即可更改任何图像的颜色，这可以使用 CSS 滤镜属性轻松完成。

例子：

索引.html

样式文件

.image img {
  max-width: 300px;
}
.original {
}
.brightness {
  filter: brightness(150%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
  
.grayscale {
  filter: grayscale(100%);
}
  
.blend {
  filter: invert(1) hue-rotate(260deg);
}

输出：

属性提示：任何图像的颜色都可以改变成多种颜色，只需改变度数即可。
例子：

filter: invert(1) hue-rotate(90deg);
filter: invert(1) hue-rotate(150deg);

4.背景剪辑文本：几乎我们每个人都尝试过为我们的文本添加精美的背景，这非常简单。 “背景剪裁文本”是指将背景图像修剪为文本，使其看起来更有吸引力和更酷。
我们可以简单地通过下面的代码行来完成，其中“anyimage”是您选择的想要剪辑的理想图像。

background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;

例子：

HTML

  

    
    

  

    
GeeksforGeeks

  

GeeksforGeeks

输出：

您甚至可以在文本的背景中剪辑 GIF！这可以使用与上面相同的代码来完成，只需将图像名称替换为 GIF 名称

5. 首字下沉文字： “首字下沉”是将第一段的第一个字母放大以产生醒目效果的文字效果，常用于报纸、杂志和小说中。

p::first-letter {               
    color:green;           
    font-size: 3.9rem;
    float: left;
    padding-right: 4px;
}

例子：

HTML

  

    
    

  

    

        

            

                Geeksforgeeks is a computer science 
                portal for geeks. The content on 
                GeeksforGeeks has been divided into 
                various categories from programming 
                languages, topic-wise practice,
                development , data structures , 
                algorithm to interview preparation,
                company- wise interview experience, 
                recruitment procedure of a company
                it has verything covered. A drop cap 
                is a effect in which the first letter 
                of the first paragraph is made larger 
                to create an eye catchy effect it is 
                often used in newspaper , magazines 
                and novels.
            
        
    

  

输出：