优秀前端设计

1. 半透明背景

示例 https://1stwebdesigner.com/best-wysiwyg-html-editor/

.hero-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
}

.header-gradient {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00e5e5e5', endColorstr='#36404c', GradientType=0);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: none;
}

@media (max-width:800px) {
    .header-gradient {
        background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
    }
}

.hero-posts {
    position: relative;
    z-index: 20;
    background: #454545;
    overflow: hidden;
}

.hero-posts .hero-post {
    width: 100%;
    padding: 4% 0 200px 0;
    margin-bottom: 0;
    position: relative;
}

@media (max-width:800px) {
    .hero-posts .hero-post {
        padding-bottom: 130px;
    }
}

@media (max-width:600px) {
    .hero-posts .hero-post {
        padding-bottom: 110px;
        padding-top: 12%;
    }
}

.single-hero .post {}

.single .hero-posts .hero-post {
    padding: 25px 0;
}

.hero-posts .hero-post:not(:first-child) {
    display: none;
}

.hero-posts .container {
    z-index: 40;
}

.hero-cats,
.entry-cats {
    position: relative;
    z-index: 101;
}

.hero-cats a,
.entry-cats a {
    font-size: 11px;
    vertical-align: middle;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    background: #20252A;
    padding: 5px 10px;
    letter-spacing: 1.5px;
    margin-right: 1px;
    float: left;
}

.hero-cats a:hover,
.entry-cats a:hover {
    background: #f68320;
}

.hero-posts .hero-text {
    opacity: 0;
    opacity: 1\9;
    position: relative;
    z-index: 40;
}

.hero-posts .hero-text p {
    color: #ddd;
    position: relative;
    z-index: 5;
    font-size: 16px;
    padding-bottom: 10px;
}

@media only screen and (max-width:1024px) {
    .hero-posts .hero-text p {
        max-width: 100%;
        text-shadow: none;
    }
}

.hero-posts .hero-post .entry-title {
    font-size: 36px;
    line-height: 1.3;
    padding: 30px 0 10px;
    color: #fff;
    position: relative;
    z-index: 5;
    border-top: none;
}

@media only screen and (max-width:1024px) {
    .hero-posts .hero-post .entry-title {}
}

@media (max-width:600px) {
    .hero-posts .hero-post .entry-title {
        font-size: 26px;
        padding: 25px 0 15px;
    }
}

.hero-posts .entry-title a {
    color: #fff;
}

.hero-posts .entry-title a:hover {
    color: #fff;
    opacity: .8;
}

.hero-date {
    color: #f5f5f5;
    font-size: 12px;
    letter-spacing: 1px;
}

.hero-tags {
    color: #ddd;
    font-size: 11px;
    letter-spacing: 0.5px;
    display: flex;
    padding: 5px 5px 5px 10px;
}

.sharing-buttons {
    float: right
}

@media (max-width:450px) {
    .hero-tags {
        display: none
    }
}

.hero-date a {
    color: #f68320;
    font-weight: 600;
}

.hero-tags a {
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 10px 0 0;
    letter-spacing: 1.5px;
    margin-left: 0;
    float: left;
}

.hero-date-span {}

.hero-date a:hover {
    text-decoration: underline
}

.hero-tags a:hover {
    text-decoration: underline;
}

.hero-date img {
    width: 24px;
    height: 24px;
    border-radius: 50px;
    margin-right: 2px;
    vertical-align: bottom;
}

.hero-pager-wrap {
    width: 100%;
    min-height: 132px;
    position: absolute;
    bottom: 0;
    z-index: 25;
}

@media (max-width:800px) {
    .hero-pager-wrap {
        min-height: 0;
        bottom: 8%;
    }
}

#hero-pager {
    margin: 0;
    border-top: solid 2px rgba(255, 255, 255, 0.4);
}

@media (max-width:800px) {
    #hero-pager {
        display: none;
    }
}

#hero-pager li {
    display: inline-block;
    list-style: none;
    width: 25%;
    float: left;
    margin-top: -2px;
    padding-right: 3%;
    border-top: solid 2px transparent;
    opacity: .5;
}

#hero-pager li:hover {
    cursor: pointer;
    opacity: 1;
}

#hero-pager li:last-child {
    margin-right: 0;
}

#hero-pager li a {
    position: relative;
    padding: 40px 0;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

#hero-pager .paging-thumb {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 45px;
    left: 0;
}

#hero-pager .paging-thumb img {}

#hero-pager .paging-text {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

#hero-pager .paging-thumb + .paging-text {
    padding-left: 65px;
}

#hero-pager .entry-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

#hero-pager .paging-date {
    font-size: 13px;
    color: #fff;
    opacity: .6;
}

#hero-pager .rslides_here {
    opacity: 1;
    border-top-color: #fff;
}

    

        

            

                

                    

                    

                
            
            

                

                    
The 10 Best WYSIWYG HTML Editors
                    

                        Written by
                         Editorial Team 
                        on December 14, 2016
                        
                        
                          

                          

                           
                          
                          
                          
                          
                          
                          

                                
                          
                          

                               
    
                          
                          
                        
                    
                
            
        
    

2. 毛玻璃效果

毛玻璃效果

  
    
    
    
  
  
    

    

      

        
WARFRAME
        
The Grineer, with their endless clone armies, have plunged the system into chaos. There is only one force that can match them, you. You are Tenno, an ancient warrior, a master of gun and blade. You wield the mighty Warframes and command their awesome powers. Forge your weapons. Gather like-minded Tenno and take the fight back to the Grineer. The Origin System needs you once again. Are you ready?