For e.g : if you want to show top property to set in 1 second of interval, use code below :
.header-scrolled
top: 15px;
transition: top 1s;
}
For e.g : if you want to show top property to set in 1 second of interval, use code below :
.header-scrolled
top: 15px;
transition: top 1s;
}
@media (max-width:600px){
/* put your css here */
.class{
}
}
Step – 1 : put following code snippet in web.xml file
<filter>
<filter-name>ExpiresFilter</filter-name>
<filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
<init-param>
<param-name>ExpiresByType image</param-name>
<param-value>access plus 1 year</param-value>
</init-param>
<init-param>
<param-name>ExpiresByType text/css</param-name>
<param-value>access plus 1 year</param-value>
</init-param>
<init-param>
<param-name>ExpiresByType application/javascript</param-name>
<param-value>access plus 1 year</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>ExpiresFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
</filter-mapping>
Step – 2 : please not, <security-constraint> code snippet should not be there in web.xml, if you want to forcefully redirect http to https then follow tutorial – https://gauravdhiman00.wordpress.com/2019/05/02/redirect-https-to-https/
Step – 3 : add following line under conf/logging.properties for troubleshooting just :
org.apache.catalina.filters.ExpiresFilter.level = FINE
Step – 4 : Go to chrome browser > inspect element > Network > select any file and check > Response header expiry Time
Get Only Usefull Css Code :
{text-overflow: ellipsis;float: left;width: 120px;overflow: hidden;}
{font-size: 12px;font-weight: normal;height: 45px;max-height: 150px;overflow: hidden;width: 100%;float: left;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
<style>
.parent_div{position:relative;float:left;width:500px;height:500px}
.inner_div{position:absolute;top:50%;left50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
</style>
<div class=”parent_div”>
<div class=”inner_div”>
</div>
</div>
/* default background-color */
background-color: #4432A5;
/* the mighty gradient */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.49, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6+ */
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Opera11.10+ */
background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* W3C */
/* some nice roundy corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
/* for links in chrome */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* a very subtle drop-shadow that ehances the pressed button effect */
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);
/* remove any inherited or default borders – especially important for the <button> element*/
border: 0 !important;
/* a subtle text inset effect which will also help to enhance the pressed button effect */
text-shadow: rgba(255, 255, 255, 0.1) -1px 0, rgba(0, 0, 0, 0.3) 1px 1px;
/* and of course a little animated background-color fade effect */
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
/* submit and reset buttons */
input.glossy-button{
vertical-align: middle;
line-height: normal !important;
padding-bottom: 0;
}
/* remove ugly dotted border */
:focus{
outline:none;
}
::-moz-focus-inner{
border:0;
}
/* the colors */
.pinkish:hover{
background-color: #Ff3366;
}
.lime:hover{
background-color: #59b606;
}
.blue:hover{
background-color: #027bbf;
}
.coffee:hover{
background-color: #832f02;
}
.strawberry:hover{
background-color: #f92020;
}
.dark:hover{
background-color: #000000;
}
/* when pressed */
button:active, .glossy-button:active{
background-color: #4432A5;
border-color: #333333;
color:#eeeeee;
padding-top:0;
padding-bottom:0;
margin-top:0;
margin-bottom:0;
padding-left:10px;
padding-right:10px;
margin-left:0;
margin-right:0;
box-shadow: none;
text-shadow: rgba(0, 0, 0, 0.4) 0 -1px, rgba(255, 255, 255, 0.3) 0 1px;
color:rgba(255, 255, 255, 0.9);
}
.ie9 button:active{
padding-top:0;
padding-bottom:2px;
margin-top:-1px;
margin-bottom:0;
padding-left:10px;
padding-right:10px;
margin-left:-1px;
margin-right:0;
border-top:1px solid white !important;
border-left:1px solid white !important;
height:31px;
border-radius: 5px;
}
.ie button, .ie .glossy-button {
background-image:url(images/butt-bg_slither.png);
background-repeat: repeat-x;
background-position:center center;
}
.ie8 button, .ie8 .glossy-button {
border:1px solid #ccc !important;
height:32px;
}
.ie7 button{
height:31px;
}
.ie7 .glossy-button{
height:28px;
}
.ie7 .glossy-button:active{
padding-bottom: 2px;
}
Output will be like:
<div class=”news_list_div_title “>
<div style=”width:100%“>Hello</div>
<div>CSS</div>
<div>World !</div>
</div>