Monday, 1 November 2021

BUTTON PADDING CHANGE HEIGHT WIDTH


------------------------------------------------------------------------------------------------------------
PADDING BUTTON CHANGE INTO WIDTH AND HEIGHT
EMOJI SITES
https://yaytext.com/emoji/keycaps/
------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#ID0 {
background-color:red;
color:White;
padding:100px;
text-align: center;
text-decoration: none;
display:inline-block;
font-size:50px;
}
#ID1 {
background-color:green;
color:White;
/*GOOGLE POPUP NOT SHOW LESS VALUE THEREFORE
WE USE WIDTH 408.65 AND WE DON'T USE GOOGLE POPUP VALUE
*/
width:408.65px;
height:262px;
text-align: center;
text-decoration: none;
display:inline-block;
font-size:50px;
}
</style>
</head>
<body>
<button id="ID0">BUTTON</button>
<button id="ID1">BUTTON</button>
</body>
</html>
------------------------------------------------------------------------------------------------------------
CSS display Property Use
-------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#ButtonContainer{
width:235px;
height:100px;
border:5px solid Black;
display:inline-flex; 
}
button{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="ButtonContainer">
<button style="background-color:Red;">BUTTON1</button>
<button style="background-color:Blue;">BUTTON2</button>
<button
style="background-image: url(&quot;https://www.w3schools.com/tags/smiley.gif&quot;);
background-repeat:no-repeat;background-position:center;
">BUTTON3</button>
</div>

</body>
</html>
--------------------------------------------------------------------------------------------------------------
BACKGROUND IMAGE FIXED OR SCROLL
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
<html> <!-- https://www.youtube.com/watch?v=IqQQFc9oA_k --> <!-- http://www.vishacademy.com/ --> <!-- https://www.w3schools.com/cssref/pr_background-attachment.asp --><head> 
<style> body{ padding:250px; background-image:url(https://goo.gl/YBbjGr); background-repeat:no-repeat; background-position:80% 30%; background-attachment:fixed; } </style> </head> <body> <h1>The background-attachment Property</h1> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>If you do not see any scrollbars, try to resize the browser window.</p> </body>
</html>
--------------------------------------------------------------------------------------------------------------
BACKGROUND ATTACHMENT FIXED
--------------------------------------------------------------------------------------------------------------
<html><head><style>body{background:url("smiley.gif")no-repeat center; background-attachment:fixed;text-align:center;}</style></head><body> <p>1<p><p>2<p><p>3<p><p>4<p><p>5<p><p>6<p><p>7<p><p>8<p><p>9<p><p>10<p><p>11<p><p>12<p><p>13<p><p>14<p><p>15<p><p>16<p><p>17<p><p>18<p><p>19<p> <p>21<p><p>22<p><p>23<p><p>24<p><p>25<p><p>26<p><p>27<p><p>28<p><p>29<p> <p>30<p></body></html>
--------------------------------------------------------------------------------------------------------------
TEXT ALIGNMENT 
TEXT ALIGN LEFT: COVER LEFT HAND SIDE SPACE
TEXT ALIGN JUSTIFY: COVER LEFT AND RIGHT SPACE
TEXT ALIGN RIGHT: COVER RIGHT HAND SIDE SPACE
-------------------------------------------------------------------------------------------------------------
TEXT ALIGNMENT
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
p{
width:380px;
border:5px solid black;
text-align:center;
}
</style>
</head>
<body>
<p>
APPLE BOY CAP AVOCADO APRICOT ART ARTIST ANGLE AND ARM AID AIM AIR APE
APPLE BOY CAP AVOCADO APRICOT ART ARTIST ANGLE AND ARM AID AIM AIR APE
APPLE BOY CAP AVOCADO APRICOT ART ARTIST ANGLE AND ARM AID AIM AIR APE
APPLE BOY CAP AVOCADO APRICOT ART
</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
TITLE CSS COLOR AND POSTION  IN HTML
READ MORE:
https://stackoverflow.com/questions/11672946/styling-an-image-title-attribute-using-css
WE ALSO USE THIS METHOD IN MEGENTO 2
.swatch-option[option-labelbefore {content:attr(option-label);}
---------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
a[titlebefore{
content:attr(;
padding-top:20px;
color:red;
position: absolute;
}
</style>
</head>
<body>
<a href="http://fo.demo.prestashop.com/en/men/1-1-hummingbird-printed-t-shirt.html#/1-size-s/8-color-white" class="color" #ffffff"><span class="sr-only">White</span></a>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
<html>
<title>DIFFERENCE .ClassA.ClassB and .ClassA .ClassB? </title>
<!-- https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c -->
<head>
<style>
.ClassA              .ClassB{
border:2px solid; 
color:red;
}
.ClassA.ClassB {
border:5px solid; 
color:Green;
}
</style>
</head>
<body>
<div class="ClassA">
<p class="ClassB">CLASS B JO KEH UNDER HAI CLASS A KAY IS KA RANG  RED HAI</p>
</div>
<p class="ClassA ClassB">asdf</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
POST SHARE WIDGET
FACEBOOK IMAGE ON BACKGROUND IMAGE
http://blogger-hints-and-tips.blogspot.com/
------------------------------------------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html -->
<style>
.RelativeBackGroundImage{
height:300px;
width:300px;
border: 1px red solid;
cursor: pointer;
/* RelativeBackGroundImage POSITION */
position: relative;
top: 0;
left: 0;
}
.AbsoluteFrontImage {
display: none;
}
.RelativeBackGroundImage:hover .AbsoluteFrontImage {
display: block;
height:60px;
width:60px;
/* AbsoluteFrontImage POSITION */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<body>
<div  class="RelativeBackGroundImage" style="background-image: url(https://www.w3schools.com/css/img_5terre.jpg);">
<a target="_blank" href="http://www.facebook.com/sharer.php?u=https://www.w3schools.com/css/img_5terre.jpg">
<div class="AbsoluteFrontImage" style="background-image: url(https://img.icons8.com/ios-glyphs/2x/facebook.png);"> 
</div>
</a>
</div>
</body>
------------------------------------------------------------------------------------------------------------------
MORE ICON  TWITTER FACEBOOK INSTAGRAM ON IMAGE 
------------------------------------------------------------------------------------------------------------------
<!-- http://vktechblog.blogspot.com/2018/07/how-to-upload-images-on-blogspot-and.html -->
<html>
<head>
<style>
.RelativeBackGroundImage{
height:300px;
width:360px;
border: 1px red solid;
cursor: pointer;
/* RelativeBackGroundImage POSITION */
position: relative;
top: 0;
left: 0;
}
.AbsoluteFrontImage {
display: none;
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.RelativeBackGroundImage:hover .AbsoluteFrontImage {
display: inline-block;
}
.nav li {
display: inline-block;
position: absolute;
}
</style>
</head>
<body>
<div  class="RelativeBackGroundImage" style="background-image: url(https://www.w3schools.com/css/img_5terre.jpg);">
<div class="nav">
<li class="AbsoluteFrontImage">
<a href="https://twitter.com/intent/tweet?url=https://html5-editor.net/">
<img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoaq92a2nQLw12YNEfeVvQ1h5g34AfC4MFqxsZtd9PQzB_WJajkJ_vsDWEvo6R-TuMk7EOpg64fyFqhWkvkbbQjl2PUk54XaXnDbfj5cgb_5T77QM17orx6lbUj6vtl2ZiXw_aX0yKwLE/s1600/twitter.png" title="Twitter">
</a>
<a target="_blank" href="http://www.facebook.com/sharer.php?u=https://www.w3schools.com/css/img_5terre.jpg">
<img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtD83_jCDerhQE6cSxjiB1bzWFrkl6E8JpVpepjuufWUCSW9mcA7L9Sg1Z1HzP_zG7cjDPkbHmTh66NRcHJL99sQoDHJdiirWQto7Ea6MkN8l0boepfEPs-aU218mwWObxK48s5EqGc3w/s1600/facebook.png" title="Facebook">
</a>
<a href="https://plus.google.com/" target="_blank">
<img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIDusoeE2aC0KJaXdlSYKTkM2zNdnOfwgHALRAFGdiPK1DonmxOCh52ijM7eMzvVWxKgpleBsZBNDeaYw0vPKyu1oq9Ma3Dv9z2pkDmFff_l1MlzAHrW0b2_LvNDew31NXjwBA_tAvks/s1600/google.png" title="Google Plus"></a>
<a href="https://instagram.com/" target="_blank">
<img alt="Instagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVqR02zyNCav9d1MFPFOwxt6ZyMSRajCV07YmB41zI3rVD-qZ5LQE7hLujVKnX0ZGvq3l8TI-pZMV60nhV_Fo3EFTV-WADI3_Rtp1XqKdtJ5fYwo7DcBOhoatZ3384VVlySpwcfsOmjI/s1600/instagram.png" title="Instagram">
</a>
<a href="http://vktechblog.blogspot.com/feeds/posts/default" target="_blank">
<img alt="RSS Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAGFz77sW-gAtqh-KYml6wyP8Xoh4D_ZXP_tAuVRdAkjk93wttzQGFSRiTeRvNE_mxR8n3T8SQKpW4LQCO8r-F0iuI2Hgeh_sSdbTn7b8xlTfRSVMBeaA8tybR06Ci2ttUn-LRD42Ybs/s1600/rss.png" title="RSS Feed">
</a><a href="mailto:your@email.com" target="_blank">
<img alt="Email" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CZqbENwBPvE-pjEo5DemUvqXCIgAU00a2f66jdTHh-bbG2QvRzLXcOdEUEANS69mZc0UKGbBeCnT_7oGszBQWxnXXhLsmC_tuFlbcdOTbLvb9WGcuo9Dv3JJm1JVe8R4-IWFzFllh8k/s1600/mail.png" title="Email"></a>
</li>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();   
});
</script>
--------------------------------------------------------------------------------------------------------------
NIVO SLIDER ONLY WORK WHEN YOU SAVE CODE IN HTML FILE ON COMPUTER
IT DOES NOT WORK IN CODE HTML CODE PREVIEW
READ MORE
https://www.jqueryscript.net/demo/nivo-slider/
OR USE THIS IMAGE CODE
<div id="slider" class="nivoSlider">
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com">
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" alt="" title="This is an example of a caption" />
</a>
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
--------------------------------------------------------------------------------------------------------------
<html lang="en">
<head>
<title>jQuery Nivo Slider Demo</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/demo/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="https://picsum.photos/618/246?random=1">
<img src="https://picsum.photos/618/246?random=2">
<img src="https://picsum.photos/618/246?random=3">
<img src="https://picsum.photos/618/246?random=4">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.jqueryscript.net/demo/nivo-slider/jquery.nivo.slider.js"></script> 
<script type="text/javascript" src="https://www.jquery-az.com/jquery/scripts/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jquery-az.com/jquery/js/jquery-nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script> 
</body>
</html>
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- https://www.jquery-az.com/jquery-slider-plug-in-nivo-with-4-demos/ -->
<!-- https://jsbin.com/xefaximulo/edit?html,output -->
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/.css/jquery-nivo-slider/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="jquery-slider-demo" class="nivoSlider">
<img src="https://www.jquery-az.com/jquery/images/toystory.jpg" alt="The slide 1" />
<a href="#"><img src="https://www.jquery-az.com/jquery/images/up.jpg" alt="The slide 2" title="The caption comes here" /></a>
<img src="https://www.jquery-az.com/jquery/images/walle.jpg" alt="The slide 3" data-transition="slideInLeft" />
<img src="https://www.jquery-az.com/jquery/images/nemo.jpg"  alt="The slide 4" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>And you may use  </strong> <em>HTML</em> captions with <a href="#">links</a>. 
</div>
</div>
</div>
<script type="text/javascript" src="https://www.jquery-az.com/jquery/scripts/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jquery-az.com/jquery/js/jquery-nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#jquery-slider-demo').nivoSlider();
});
</script>
</body>
</html>

Posted by on Monday, 1 November 2021 at 16:26
Labels: , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets