HTML5 CSS3一款很漂亮的玫瑰红用户订阅界面模板

很棒的订阅按钮渐变色，透明标题特效使用了text-fill-color: transparent, 可用于在线花店或者时尚女性类网站页面模板。

css3, 文本特效，button

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4478
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* fonts  */

@import url('https://fonts.googleapis.com/css?family=Abel|Aguafina+Script|Artifika|Athiti|Condiment|Dosis|Droid+Serif|Farsan|Gurajada|Josefin+Sans|Lato|Lora|Merriweather|Noto+Serif|Open+Sans+Condensed:300|Playfair+Display|Rasa|Sahitya|Share+Tech|Text+Me+One|Titillium+Web');
body {
    /* 	background-image: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%); */
    
    background: url(/uploads/1706/nature-flowers-vintage-plant.jpg);
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
}
#container {
    background-image: linear-gradient(to top, rgba(205, 156, 242, 0.40) 0%, rgba(246, 255, 255, 0.71) 100%);
    box-shadow: 0 15px 30px 1px rgba(128, 128, 128, 0.31);
    text-align: center;
    border-radius: 5px;
    margin: 3em auto;
    background: rgba(255, 255, 255, 0.95);
    height: 300px;
    width: 480px;
    padding: 1em;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}
#container h2 {
    background: url(/uploads/1706/nature-flowers-vintage-plant.jpg);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    /* 	background-image: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%); */
    
    font-family: 'Playfair Display', serif;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    letter-spacing: 2px;
    font-size: 3.5em;
    margin: 0;
}
#container p {
    font-family: 'Farsan', cursive;
    margin: 3px 0 1.5em 0;
    font-size: 1.3em;
    color: #7d7d7d;
}
#container input {
    /* 	background: rgba(255, 13, 254, 0.90); */
    
    width: 210px;
    display: inline-block;
    text-align: center;
    border-radius: 7px;
    background: #eee;
    padding: 1em 2em;
    outline: none;
    border: none;
    color: #222;
    transition: 0.3s linear;
}
::placeholder {
    color: #999;
}
#container input:focus {
    background: rgba(0, 0, 333, 0.10);
}
#container button {
    background-image: linear-gradient(to left, rgba(255, 146, 202, 0.75) 0%, rgba(145, 149, 251, 0.86) 100%);
    box-shadow: 0 9px 25px -5px #df91fb;
    font-family: 'Abel', sans-serif;
    padding: 0.5em 1.9em;
    margin: 2.3em 0 0 0;
    border-radius: 7px;
    font-size: 1.4em;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 1em;
    outline: none;
    border: none;
    transition: 0.3s linear;
}
#container button:hover {
    transform: translatey(2px);
}
#container button:active {
    transform: translatey(5px);
}

HTML

很棒的订阅按钮渐变色，透明标题特效使用了text-fill-color: transparent, 可用于在线花店或者时尚女性类网站页面模板。

css3, 文本特效，button

编辑器支持Emmet

快捷键

很棒的订阅按钮渐变色，透明标题特效使用了text-fill-color: transparent, 可用于在线花店或者时尚女性类网站页面模板。

css3, 文本特效，button

HTML5/CSS3很棒的一款提示用户向下滚动页面的箭头动画

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：