8
How to do the effect below little by little, according to the screen resolution.
*Without using clip, because otherwise would be many media queries, and on this site, the effect seems a smooth transition.
CSS:
/* lista de notícias */
.chamada {
border-bottom: 1px dotted #ccc;
display: block;
margin-bottom: 1em;
padding-bottom: 1em;
text-decoration: none;
width: 100%;
overflow: hidden;
}
.chamada:last-child {
border-bottom: 0;
}
.chamada img {
border-radius: 5px;
display: block;
float: left;
margin-right: 0.8em;
}
.chamada.mini img {
margin-bottom: 0.4em;
}
.chamada:hover h2 {
text-decoration: underline;
}
.chamada.principal h2 {
font-size: 1.8em;
line-height: 1.05;
}
.chamada.normal h2 {
font-size: 1em;
}
.chamada.secundaria h2 {
font-size: 0.6em;
}
.chamada.mini {
padding-right: 0.35em;
}
:not(.mini) .chamada.mini + .mini {
padding-left: 0.35em;
padding-right: 0;
}
/* direita da TV */
.chamada.tv {
border: 1px solid #ccc;
border-radius: 5px;
}
.tv img {
border-radius: 3px 3px 0 0;
margin-top: -1px;
}
.tv p {
clear: both;
color: #999;
padding: 1.4em 1em 0.25em;
}
.tv h2 {
padding: 0 1em;
margin: 0;
border: 0;
}
.tv .bolinha {
display: inline-block;
border-radius: 50%;
background: #aaa;
height: 7px;
width: 7px;
margin-top: 1.4em;
}
.tv .bolinha:first-of-type {
background: #555;
margin-left: 1.5em;
}
HTML
<a href="video.html" class="tv chamada normal famosos">
<img src="img/tv1.jpg" alt="Roupão">
</a>
*Classes are also used by other elements within the link
Donwload of the project:
It is no longer simple to use the image as
background
element and definebackground-size: cover
? With html and css... think that will need to gambiarra :) puts the relevant part of html also.– Renan Gomes
it would be harder pro back alter the image according to the news
– Murilo Melo
and no kind of gambiarra is used, so much so that this project was sent by a responsive design teacher only with html and css, this is the only style applied
– Murilo Melo
I meant "cut the image".
– Renan Gomes
so, about cutting the image, it’s only done in css itself and it’s automatic, I’ll put the link to download the folder
– Murilo Melo
I don’t understand what you want. you want a div anime when it changes size to hide or not the image ? because its css already with overflow Hidden the image is already hidden
– Jasar Orion
So man, the image suffers small cuts, as you must have seen, the image suffers constant cuts only with CSS, wanted to know how it was made, and how it works, because in the course, it came already ready and was not explained
– Murilo Melo
If you listen to what @Renan said at the beginning, it will work. And I don’t see any difficulty in changing the image according to the news.... it’s just because css inline.
– caiocafardo
"the image undergoes small cuts, as you may have seen, the image undergoes constant cuts only with CSS". These cuts are made according to the screen resolution, or the image starts large and decreases, regardless of being on the computer or mobile phone?
– Patrick Corrêa Muniz
Download the project you will see, it does not use srcset or anything like that :/ that you find it very strange
– Murilo Melo