1. дома
  2. Вопрос и ответ
  3. Как получить этот дизайн CSS

Как получить этот дизайн CSS

2017-02-16 4 views
1

Я пытаюсь получить эту css конструкцию, как показано ниже:Как получить этот дизайн CSS

date

Но мой вывод выглядит:

op

Вы видите поле даты в правом верхнем углу изображения. Красный цвет был изображением.

Я установил этот красный как фон <p> тег есть класс .img-datpick.

Моего вопрос был

Как разместить текст в этом красном фоне, как как в изображении?

Как перенести это в верхний правый угол?

Заранее спасибо.

.articles { 
 
    margin-top: 3%; 
 
} 
 
img{ 
 
    width:100%; 
 
} 
 

 
.articles .articles-img .img-datpick { 
 
    background-image: url(https://lh3.googleusercontent.com/OFHJ7eqWeBF8yamaHpADLWySPh6a9tlsSUFGCV3TBgrmh4wfRGr2IQbw03KusmRisX1knyGNPtHKpEGav48S694cRljgkNR80PpHX8ruLhstR1ayzXlDs9vNzyvQeqQtHcfMc7VqA9O3jlfjynaCvKJCGSS0v-L0vZcz0Ah-w8t3JZXAfU-Qk8O8zcmsgWvbr7qkhtP3BuXZy71sKMCXzIpF-DKaaVQb7FYAAtguTefF54IsHmNU4wOleOcfCjJhoDjOeGQEv6DUcLnQuh_sHx1sL4x9PkskTEIadc_VRlKECtpa-72JFGVBhoCx8OBoMRM037HlOdEy4qGqN1ZdiGB5z1zGjsBfa-qcz6-JP5KjZiTuKD3GlWJAhnXnFeimaJsjaTCTzi664Hc4Hc-dlxDzIO9pgs4RqaUqWtbl7bJtdkRHEDaOpDZLLZsNJj-2ijuHg7ie8TLS_U6YrE_B7MJMEeFR112dPg-ijQrG-8qmZKb69m4zPj_gEqj1PXPqsv3m9s2C-6DxzH0TuB7mEWzH_F11tK2PKe0O7kCR5dFVekgvtuxLq_VRISwz5kh8MtfFf2ONaV5qNJ_5ibFEby-3pEe7NTbAwCaQtTwx7CQK8A=w62-h65-no); 
 
    background-repeat: no-repeat; 
 
    height: 65px; 
 
} 
 

 
.articles .documentation-content { 
 
    background: #edebec; 
 
    padding: 5px 8px 8px 8px; 
 
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.articles .documentation-content .doc-posted { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
.articles .documentation-content .doc-posted p { 
 
    color: #848589; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
    font-size: 11px; 
 
    margin-right: 6px; 
 
} 
 

 
.articles .documentation-content .doc-posted p i { 
 
    margin-right: 3px; 
 
} 
 

 
.articles .documentation-content .doc-h1 { 
 
    color: #848589; 
 
    font-size: 21px; 
 
    font-weight: 700; 
 
    text-transform: none; 
 
    text-align: left; 
 
    margin-top: 7px; 
 
} 
 

 
.articles .documentation-content .doc-p { 
 
    color: #848589; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
} 
 

 
.articles .documentation-content .doc-p span { 
 
    color: #de0000; 
 
    text-decoration: underline; 
 
    text-transform: capitalize; 
 
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 articles"> 
 
    <div class="articles-img"> 
 
    <img src="https://lh3.googleusercontent.com/_26gdiWJg5Nem0LcB3j91bZOLoFgUdqM-1HtbmJfwmUIKY_bQoJd5Yali_l5efltYySgX87gobteQ-6Es2Djns1GM3RA355O4ziUwwE5ceS5eZojE5CUQexdT2gRUzKf672ul9Yic6PDm6bGVZircbss_Y6O6Uc3s8oRnu2cMYV63CDcUlKRwIoLHedRBtEVm8dqQqKGIBqz0JtrNCkFBcNNXPGwhhpWQFzn27HlaDtRc0l5Tp6C8FOzornDIlbjZeqBA3YRYN7-5xPDh9YK0sJPrQN_BWOF5dzrOgUmmuFJKZAzcK2OzyQ0kG0qIPaciOQFkiWR3VXL2HTFSv7MbTqCjtwKbkplLtoEnl6oGZKNcjEIRHQKjM_Km0JQ-YZv8OopV-iCPTM0vlgl4bPz5iaIvbRlZmwFndWR_jHCBcbPlcRPXMowsokVFrrlP24sGSQBSRzK4rlDgTOn1wKbPwWrO7dKKdUOuPxqKHOAN_k-mLk9gAQkw3Hy5crX-OcNUvgNjYUjlazX2Oo56gy7NKbwWkfEWEgi4MB83fqOhi1SwG3TjkL0PqyAnhDQi5gAEMMFO2CKj3AaNHP2KepoFRgMjd5JmsMOfdJT6iDFNtwAQQ=w385-h214-no"> 
 

 
    <p class="img-datpick">28<span>june</span></p> 
 
    </div> 
 
    <div class="documentation-content"> 
 
    <div class="doc-posted"> 
 
     <p><i class="fa fa-user" aria-hidden="true"></i> posted by: john doe</p> 
 
     <p><i class="fa fa-clock-o" aria-hidden="true"></i> 28 june 2015</p> 
 
     <p><i class="fa fa-comment-o" aria-hidden="true"></i> 36 comments</p> 
 
    </div> 
 

 
    <h1 class="doc-h1">Lorem ipsum dolor sit amet</h1> 
 
    <p class="doc-p">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span>read more..</span></p> 
 
    </div> 
 
</div>

источник

2017-02-16 Prasath V

ответ

3 

.articles { 
 
    margin-top: 3%; 
 
} 
 
img{ 
 
    width:100%; 
 
} 
 

 
.articles .articles-img .img-datpick { 
 
    background-image: url(https://lh3.googleusercontent.com/OFHJ7eqWeBF8yamaHpADLWySPh6a9tlsSUFGCV3TBgrmh4wfRGr2IQbw03KusmRisX1knyGNPtHKpEGav48S694cRljgkNR80PpHX8ruLhstR1ayzXlDs9vNzyvQeqQtHcfMc7VqA9O3jlfjynaCvKJCGSS0v-L0vZcz0Ah-w8t3JZXAfU-Qk8O8zcmsgWvbr7qkhtP3BuXZy71sKMCXzIpF-DKaaVQb7FYAAtguTefF54IsHmNU4wOleOcfCjJhoDjOeGQEv6DUcLnQuh_sHx1sL4x9PkskTEIadc_VRlKECtpa-72JFGVBhoCx8OBoMRM037HlOdEy4qGqN1ZdiGB5z1zGjsBfa-qcz6-JP5KjZiTuKD3GlWJAhnXnFeimaJsjaTCTzi664Hc4Hc-dlxDzIO9pgs4RqaUqWtbl7bJtdkRHEDaOpDZLLZsNJj-2ijuHg7ie8TLS_U6YrE_B7MJMEeFR112dPg-ijQrG-8qmZKb69m4zPj_gEqj1PXPqsv3m9s2C-6DxzH0TuB7mEWzH_F11tK2PKe0O7kCR5dFVekgvtuxLq_VRISwz5kh8MtfFf2ONaV5qNJ_5ibFEby-3pEe7NTbAwCaQtTwx7CQK8A=w62-h65-no); 
 
    background-repeat: no-repeat; 
 
    height: 65px; 
 
} 
 

 
.articles .documentation-content { 
 
    background: #edebec; 
 
    padding: 5px 8px 8px 8px; 
 
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.articles .documentation-content .doc-posted { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
.articles .documentation-content .doc-posted p { 
 
    color: #848589; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
    font-size: 11px; 
 
    margin-right: 6px; 
 
} 
 

 
.articles .documentation-content .doc-posted p i { 
 
    margin-right: 3px; 
 
} 
 

 
.articles .documentation-content .doc-h1 { 
 
    color: #848589; 
 
    font-size: 21px; 
 
    font-weight: 700; 
 
    text-transform: none; 
 
    text-align: left; 
 
    margin-top: 7px; 
 
} 
 

 
.articles .documentation-content .doc-p { 
 
    color: #848589; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
} 
 

 
.articles .documentation-content .doc-p span { 
 
    color: #de0000; 
 
    text-decoration: underline; 
 
    text-transform: capitalize; 
 
} 
 

 
/* These are the new styles */ 
 
.articles { 
 
    position: relative; 
 
} 
 

 
.img-datpick { 
 
    position: absolute; 
 
    right: 40px; 
 
    top: -7px; 
 
    margin: 0; 
 
    width: 62px; 
 
    color: white; 
 
    text-align: center; 
 
    padding-top: 7px; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
} 
 

 
.img-datpick span { 
 
    display: block; 
 
    font-size: initial; 
 
    font-weight: normal; 
 
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 articles"> 
 
    <div class="articles-img"> 
 
    <img src="https://lh3.googleusercontent.com/_26gdiWJg5Nem0LcB3j91bZOLoFgUdqM-1HtbmJfwmUIKY_bQoJd5Yali_l5efltYySgX87gobteQ-6Es2Djns1GM3RA355O4ziUwwE5ceS5eZojE5CUQexdT2gRUzKf672ul9Yic6PDm6bGVZircbss_Y6O6Uc3s8oRnu2cMYV63CDcUlKRwIoLHedRBtEVm8dqQqKGIBqz0JtrNCkFBcNNXPGwhhpWQFzn27HlaDtRc0l5Tp6C8FOzornDIlbjZeqBA3YRYN7-5xPDh9YK0sJPrQN_BWOF5dzrOgUmmuFJKZAzcK2OzyQ0kG0qIPaciOQFkiWR3VXL2HTFSv7MbTqCjtwKbkplLtoEnl6oGZKNcjEIRHQKjM_Km0JQ-YZv8OopV-iCPTM0vlgl4bPz5iaIvbRlZmwFndWR_jHCBcbPlcRPXMowsokVFrrlP24sGSQBSRzK4rlDgTOn1wKbPwWrO7dKKdUOuPxqKHOAN_k-mLk9gAQkw3Hy5crX-OcNUvgNjYUjlazX2Oo56gy7NKbwWkfEWEgi4MB83fqOhi1SwG3TjkL0PqyAnhDQi5gAEMMFO2CKj3AaNHP2KepoFRgMjd5JmsMOfdJT6iDFNtwAQQ=w385-h214-no"> 
 

 
    <p class="img-datpick">28<span>june</span></p> 
 
    </div> 
 
    <div class="documentation-content"> 
 
    <div class="doc-posted"> 
 
     <p><i class="fa fa-user" aria-hidden="true"></i> posted by: john doe</p> 
 
     <p><i class="fa fa-clock-o" aria-hidden="true"></i> 28 june 2015</p> 
 
     <p><i class="fa fa-comment-o" aria-hidden="true"></i> 36 comments</p> 
 
    </div> 
 

 
    <h1 class="doc-h1">Lorem ipsum dolor sit amet</h1> 
 
    <p class="doc-p">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span>read more..</span></p> 
 
    </div> 
 
</div>

источник

2017-02-16 07:45:52 Sebastian

+1

, возможно, посмотрите на изменение 'font-family',' text-transform' и, возможно, более легкий вес на имя месяца – haxxxton

+0

Right @haxxxton .. –

+0

Я бы изменил эти проблемы шрифта @Sebastian , Спасибо за ответ –

0

Да вы можете. С использованием Позиция Недвижимость.

.articles-img { position: relative; } 
.articles .articles-img .img-datpick { 
    position: absolute; 
    right: 15px; 
    top: -23px; 
} 


.articles { 
 
    margin-top: 3%; 
 
} 
 
img{ 
 
    width:100%; 
 
} 
 

 
.articles .articles-img .img-datpick span { display: block; } 
 

 
.articles .articles-img .img-datpick { 
 
    background-image: url(https://lh3.googleusercontent.com/OFHJ7eqWeBF8yamaHpADLWySPh6a9tlsSUFGCV3TBgrmh4wfRGr2IQbw03KusmRisX1knyGNPtHKpEGav48S694cRljgkNR80PpHX8ruLhstR1ayzXlDs9vNzyvQeqQtHcfMc7VqA9O3jlfjynaCvKJCGSS0v-L0vZcz0Ah-w8t3JZXAfU-Qk8O8zcmsgWvbr7qkhtP3BuXZy71sKMCXzIpF-DKaaVQb7FYAAtguTefF54IsHmNU4wOleOcfCjJhoDjOeGQEv6DUcLnQuh_sHx1sL4x9PkskTEIadc_VRlKECtpa-72JFGVBhoCx8OBoMRM037HlOdEy4qGqN1ZdiGB5z1zGjsBfa-qcz6-JP5KjZiTuKD3GlWJAhnXnFeimaJsjaTCTzi664Hc4Hc-dlxDzIO9pgs4RqaUqWtbl7bJtdkRHEDaOpDZLLZsNJj-2ijuHg7ie8TLS_U6YrE_B7MJMEeFR112dPg-ijQrG-8qmZKb69m4zPj_gEqj1PXPqsv3m9s2C-6DxzH0TuB7mEWzH_F11tK2PKe0O7kCR5dFVekgvtuxLq_VRISwz5kh8MtfFf2ONaV5qNJ_5ibFEby-3pEe7NTbAwCaQtTwx7CQK8A=w62-h65-no); 
 
    background-repeat: no-repeat; 
 
    height: 65px; 
 
    position: absolute; 
 
    right: 15px; 
 
    top: -32px; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    color: #fff; 
 
    width: 70px; 
 
    padding: 10px 0 10px; 
 
    background-size: cover; 
 
} 
 

 
.articles-img { position: relative; } 
 

 
.articles .documentation-content { 
 
    background: #edebec; 
 
    padding: 5px 8px 8px 8px; 
 
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.articles .documentation-content .doc-posted { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
.articles .documentation-content .doc-posted p { 
 
    color: #848589; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
    font-size: 11px; 
 
    margin-right: 6px; 
 
} 
 

 
.articles .documentation-content .doc-posted p i { 
 
    margin-right: 3px; 
 
} 
 

 
.articles .documentation-content .doc-h1 { 
 
    color: #848589; 
 
    font-size: 21px; 
 
    font-weight: 700; 
 
    text-transform: none; 
 
    text-align: left; 
 
    margin-top: 7px; 
 
} 
 

 
.articles .documentation-content .doc-p { 
 
    color: #848589; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
} 
 

 
.articles .documentation-content .doc-p span { 
 
    color: #de0000; 
 
    text-decoration: underline; 
 
    text-transform: capitalize; 
 
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 articles"> 
 
    <div class="articles-img"> 
 
    <img src="https://lh3.googleusercontent.com/_26gdiWJg5Nem0LcB3j91bZOLoFgUdqM-1HtbmJfwmUIKY_bQoJd5Yali_l5efltYySgX87gobteQ-6Es2Djns1GM3RA355O4ziUwwE5ceS5eZojE5CUQexdT2gRUzKf672ul9Yic6PDm6bGVZircbss_Y6O6Uc3s8oRnu2cMYV63CDcUlKRwIoLHedRBtEVm8dqQqKGIBqz0JtrNCkFBcNNXPGwhhpWQFzn27HlaDtRc0l5Tp6C8FOzornDIlbjZeqBA3YRYN7-5xPDh9YK0sJPrQN_BWOF5dzrOgUmmuFJKZAzcK2OzyQ0kG0qIPaciOQFkiWR3VXL2HTFSv7MbTqCjtwKbkplLtoEnl6oGZKNcjEIRHQKjM_Km0JQ-YZv8OopV-iCPTM0vlgl4bPz5iaIvbRlZmwFndWR_jHCBcbPlcRPXMowsokVFrrlP24sGSQBSRzK4rlDgTOn1wKbPwWrO7dKKdUOuPxqKHOAN_k-mLk9gAQkw3Hy5crX-OcNUvgNjYUjlazX2Oo56gy7NKbwWkfEWEgi4MB83fqOhi1SwG3TjkL0PqyAnhDQi5gAEMMFO2CKj3AaNHP2KepoFRgMjd5JmsMOfdJT6iDFNtwAQQ=w385-h214-no"> 
 

 
    <p class="img-datpick">28<span>june</span></p> 
 
    </div> 
 
    <div class="documentation-content"> 
 
    <div class="doc-posted"> 
 
     <p><i class="fa fa-user" aria-hidden="true"></i> posted by: john doe</p> 
 
     <p><i class="fa fa-clock-o" aria-hidden="true"></i> 28 june 2015</p> 
 
     <p><i class="fa fa-comment-o" aria-hidden="true"></i> 36 comments</p> 
 
    </div> 
 

 
    <h1 class="doc-h1">Lorem ipsum dolor sit amet</h1> 
 
    <p class="doc-p">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span>read more..</span></p> 
 
    </div> 
 
</div>

источник

2017-02-16 07:33:24

+0

, что не совсем корректно. часть изображения обрезается, и текст по-прежнему похож на OP. – haxxxton

+0

Я пробовал это. Но посмотрите дату внутри с оригинальным дизайном. 28 и июнь сосредоточены .. Как @haxxxton сказал –

+0

@haxxxton Эй, я только что обновил ans. Его внешний вид похож на OP. Для font-family добавьте этот шрифт. –

0

CSS

.articles { 
     margin-top: 3%; 
    } 
    img{ 
     width:100%; 
    } 

    .articles .articles-img .img-datpick { 
     float:right; 
     position: absolute; 
    z-index: 10; 
     background-image: url(https://lh3.googleusercontent.com/OFHJ7eqWeBF8yamaHpADLWySPh6a9tlsSUFGCV3TBgrmh4wfRGr2IQbw03KusmRisX1knyGNPtHKpEGav48S694cRljgkNR80PpHX8ruLhstR1ayzXlDs9vNzyvQeqQtHcfMc7VqA9O3jlfjynaCvKJCGSS0v-L0vZcz0Ah-w8t3JZXAfU-Qk8O8zcmsgWvbr7qkhtP3BuXZy71sKMCXzIpF-DKaaVQb7FYAAtguTefF54IsHmNU4wOleOcfCjJhoDjOeGQEv6DUcLnQuh_sHx1sL4x9PkskTEIadc_VRlKECtpa-72JFGVBhoCx8OBoMRM037HlOdEy4qGqN1ZdiGB5z1zGjsBfa-qcz6-JP5KjZiTuKD3GlWJAhnXnFeimaJsjaTCTzi664Hc4Hc-dlxDzIO9pgs4RqaUqWtbl7bJtdkRHEDaOpDZLLZsNJj-2ijuHg7ie8TLS_U6YrE_B7MJMEeFR112dPg-ijQrG-8qmZKb69m4zPj_gEqj1PXPqsv3m9s2C-6DxzH0TuB7mEWzH_F11tK2PKe0O7kCR5dFVekgvtuxLq_VRISwz5kh8MtfFf2ONaV5qNJ_5ibFEby-3pEe7NTbAwCaQtTwx7CQK8A=w62-h65-no); 
     background-repeat: no-repeat; 
     height: 65px; 
    } 

    .articles .documentation-content { 
     background: #edebec; 
     padding: 5px 8px 8px 8px; 
     box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); 
    } 

    .articles .documentation-content .doc-posted { 
     display: table; 
     margin: 0 auto; 
    } 

    .articles .documentation-content .doc-posted p { 
     color: #848589; 
     text-transform: capitalize; 
     display: inline; 
     font-size: 11px; 
     margin-right: 6px; 
    } 

    .articles .documentation-content .doc-posted p i { 
     margin-right: 3px; 
    } 

    .articles .documentation-content .doc-h1 { 
     color: #848589; 
     font-size: 21px; 
     font-weight: 700; 
     text-transform: none; 
     text-align: left; 
     margin-top: 7px; 
    } 

    .articles .documentation-content .doc-p { 
     color: #848589; 
     font-size: 14px; 
     font-weight: 500; 
    } 

    .articles .documentation-content .doc-p span { 
     color: #de0000; 
     text-decoration: underline; 
     text-transform: capitalize; 
    }

HTML

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 articles"> 
    <div class="articles-img"> 
    <div class="img-datpick">28<span>june</span></div> 
    <img src="https://lh3.googleusercontent.com/_26gdiWJg5Nem0LcB3j91bZOLoFgUdqM-1HtbmJfwmUIKY_bQoJd5Yali_l5efltYySgX87gobteQ-6Es2Djns1GM3RA355O4ziUwwE5ceS5eZojE5CUQexdT2gRUzKf672ul9Yic6PDm6bGVZircbss_Y6O6Uc3s8oRnu2cMYV63CDcUlKRwIoLHedRBtEVm8dqQqKGIBqz0JtrNCkFBcNNXPGwhhpWQFzn27HlaDtRc0l5Tp6C8FOzornDIlbjZeqBA3YRYN7-5xPDh9YK0sJPrQN_BWOF5dzrOgUmmuFJKZAzcK2OzyQ0kG0qIPaciOQFkiWR3VXL2HTFSv7MbTqCjtwKbkplLtoEnl6oGZKNcjEIRHQKjM_Km0JQ-YZv8OopV-iCPTM0vlgl4bPz5iaIvbRlZmwFndWR_jHCBcbPlcRPXMowsokVFrrlP24sGSQBSRzK4rlDgTOn1wKbPwWrO7dKKdUOuPxqKHOAN_k-mLk9gAQkw3Hy5crX-OcNUvgNjYUjlazX2Oo56gy7NKbwWkfEWEgi4MB83fqOhi1SwG3TjkL0PqyAnhDQi5gAEMMFO2CKj3AaNHP2KepoFRgMjd5JmsMOfdJT6iDFNtwAQQ=w385-h214-no"> 

    </div> 
    <div class="documentation-content"> 
    <div class="doc-posted"> 
     <p><i class="fa fa-user" aria-hidden="true"></i> posted by: john doe</p> 
     <p><i class="fa fa-clock-o" aria-hidden="true"></i> 28 june 2015</p> 
     <p><i class="fa fa-comment-o" aria-hidden="true"></i> 36 comments</p> 
    </div> 

    <h1 class="doc-h1">Lorem ipsum dolor sit amet</h1> 
    <p class="doc-p">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span>read more..</span></p> 
    </div> 
</div>

источник

2017-02-16 07:43:58 Venky

+1

Mr.Sebastian предоставил вам правильный ответ. Хорошая работа! @Sebastian – Venky

+0

Благодарим вас за ответ @venky –

Смежные вопросы

 Смежные вопросы