【海北做网站】下面是一些CSS技巧修改您的网站列表悬停等特效

【海北做网站】下面是一些CSS技巧修改您的网站列表悬停等特效


可以帮助您自定义可解释主题用户界面。每个示例都具有实现此效果所需的预览和自定义CSS块。一如既往,我们建议您通过儿童主题或ePanel中的自定义CSS框。

最小界面造型

下面的CSS将为您的列表模式和悬停状态提供一个更简约的外观。

海北做网站

#et-slider-wrapper, .location-description, .et-place-text-wrapper {
    backgroundnone;
}

#et-slider-wrapper {
    background-color#fff;
}

.et-place-content, .et-map-postmeta, .location-title, .location-title h2 {
    border:none;
}

.et-date, .et-map-postmeta {
    text-shadow:none;
}

#et-slider-wrapper:after, #et-slider-wrapper:before {
    displaynone;
}

.et-map-post .viewport {
    widthauto;
}

.et-place-content {
    padding40px;
}

.et-place-main-text {
    padding-left0;
}

.et-map-post .scrollbar, .more {
    margin-right-25px;
}

.thumbnail:before, .et-date, .location-rating {
    border:none !important;
    -webkit-box-shadow: inset 0 0 0 !important;
    -moz-box-shadow: inset 0 0 0 !important;
    box-shadow: inset 0 0 0 !important;
}


拆卸落盖

默认情况下,列表描述以滴头开始。下面的CSS将删除此样式,描述的第一个字母将显示为文本的其余部分。

.viewport .overview > p:nth-of-type(1):first-letter {
    displayinline;
    floatnone;
    font-size14px;
    margin-right0;
    margin-top0;
}


缩略图

下面的CSS将修改您的列表缩略图,使其在悬停时淡入黑暗,并在光标悬停时使用反向动画。

.thumbnail {
    background-color#000;
}

.thumbnail img {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.thumbnail:hover img {
    opacity:.6;
}


圆角

下面的CSS将为您的列表模式、列表悬停状态和列表POST页面添加圆角。

.et-place-content, .location-rating, .sub-menu {
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

 #et-slider-wrapper:before, .thumbnail:before, .thumbnail img, .location-title, #breadcrumbs {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

#content:before{
    -webkit-border-bottom-right-radius: 12px;
    -moz-border-radius-bottomright: 12px;
    border-bottom-right-radius: 12px;
}

#et-slider-wrapper, .et_marker_info, #main-area .container, #content, .location-description {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

#main-area .et-map-post img, #main-area .et-map-post .thumbnail {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

#et-slider-wrapper:after {
    displaynone;
}


上市标牌

下面的CSS将在你的列表标题后面添加一个半透明的黑色横幅。

.et-description {
    background-color: rgba(0,0,0,.3);
    padding:20px 0;
    margin-top-20px;
}





二维码