css,Code片段,代码实例,代码示例,代码片段库

css Vinculo Whatsapp

index.html

//Los telefonos celulares se agregan asi: +54XXX  y sin el 15
<a class="whatsapp-movil" href="whatsapp://send/?phone=+543548999999&text=Quiero%20saber%20el%20precio%20del%20producto%20">Preguntar por Whatsapp o poner cel 3548 999 999</a>
<a class="whatsapp-web" href="https://web.whatsapp.com/send/?phone=+543548999999&text=Quiero%20saber%20el%20precio%20del%20producto%20" target="_blank">Preguntar por Whatsapp o poner cel 3548 999 999</a>

//OPCIONAL ICON FONTAWESOME
<i class="fa fa-whatsapp"></i> /* Version 4.7*/
<i class="fab fa-whatsapp"></i> /*Version 5*/

//OPCIONAL CON CLASES BOOTSTRAP 3
 <a class="visible-xs" href="whatsapp://send/?phone=+543548572212&text=Quiero%20contactarlos">+54 3548 572212</a>
<a class="hidden-xs" href="https://web.whatsapp.com/send/?phone=+543548572212&text=Quiero%20contactarlos" target="_blank">+54 3548 572212</a>

style.css

@media (max-width:768px){
    .whatsapp-movil{
        display:inline;
    }
    .whatsapp-web{
        display:none;
    }
}

@media (min-width:768px){
    .whatsapp-movil{
        display:none;
    }
    .whatsapp-web{
        display:inline;
    }
}

css Textos con Degrade

texto-degrade.css

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

css Cambiar背景al Scrollar

index.html

<nav class="navbar navbar-default navbar-fixed-top">
  .....
</nav>

scrolled.js

$(window).scroll(function(){
	$('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});

style.css

.navbar-default{
  transition:500ms ease;
  background:transparent;
}
.navbar-default.scrolled{
  background:#000;
}

css Acortar Textos

acortar-texto.css

div {
	width: 350px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

css 即10 11 css

https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11

css.css

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   color:blue
}

css 自订复选框

CheckboxcustomiséenCSS，égalementdisponiblepour les boutons radio：https：//www.w3schools.com/howto/howto_css_custom_checkbox.asp

template.html

<label class="check-label"><input type="checkbox" name="activite" value="value 1"><span class="checkmark"></span>Text</label>

style.css

.check-label {
	width: 100%;
	box-sizing: border-box;
	border-radius: 3px;
	border: 1px solid #e0d0d0;
	color: #777;
	font-size: 16px;
	background-color: #eef2f7;
	margin: 5px 0;
	padding: 15px 20px 15px 60px;
	position: relative;
}

.check-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 15px;
	left: 15px;
	height: 25px;
	width: 25px;
	border-radius: 3px;
	background-color: #eee;
}

.checkmark:after {
	content: '';
	position: absolute;
	display: none;
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.check-label:hover input ~ .checkmark {
	background-color: #ccc;
}

.check-label input:checked ~ .checkmark {
  background-color: #2196F3;
}

.check-label input:checked ~ .checkmark:after {
	display: block;
}

css ふんわりとした的box-shadow

（参考サイト）<br/> https://saruwakakun.com/html-css/basic/box-shadow

index.html

<div class="sample">これは例です。</div>

style.css

.sample {
  padding: 20px;
  margin: 2em;
  max-width: 400px;/*無くてもOK*/
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 0px 20px rgba(0,0,0,0.2);
}

css 外侧余白の右ボーダー

（参考サイト）<br/> https://saruwakakun.com/html-css/reference/border-length

index.html

            <dl class="dl_border_style flex_box flex_wrap flex_start">
                <dt>会社名</dt>
                <dd>長崎名水株式会社</dd>
                <dt>住所</dt>
                <dd>〒859-0144 長崎県諫早市高来町溝口214</dd>
                <dt>連絡先</dt>
                <dd>TEL 0957-32-2539 / FAX 0957-32-2994</dd>
            </dl>

style.css

.dl_border_style {
    width: 530px;
}

.dl_border_style dt {
    width: 120px;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #cdcdcd;
    padding: 15px;
}

.dl_border_style dt:before {
    content: '';
    position: absolute;
    right: 0;
    display: inline-block;
    width: 1px;
    height: 35px;
    background-color: #cdcdcd;
}

.dl_border_style dd {
    width: 410px;
    box-sizing: border-box;
    border-bottom: 1px solid #cdcdcd;
    padding: 15px 20px 15px 30px;
}

.dl_border_style dt:nth-of-type(01),
.dl_border_style dd:nth-of-type(01) {
    border-top: 1px solid #cdcdcd;
}

css SVG内联尺寸 - tamanho

css.css

svg {
      width: 15px;
      height: 15px;

      //add this clas to path attribute
      .icon1 {
        fill: #fff !important;
      }
    }

css 图像div悬停缩放效果

css.css

.posts {
  display: flex;

  .item {
    .imagem {
      display: inline-block;
      overflow: hidden;

      img {
        display: block;
        transition: transform .6s;
      }
    }

    &:hover img {
      transform: scale(1.1);
      transform-origin: 50% 50%;
    }
  }
}