JSFiddle

  • selectmenü 2

    No-Library (pure JS), HTML, SCSS, JavaScript

    
     
     
     
     
     
     
      
     <h1 class="animated fadeInDown"><i class="icon icon-arrow-down"></i></h1>
    
    <h1 class="animated rotateIn">PURE CSS SELECT</h1>
    <p>1. Normal</p>
    <div class="select animated zoomIn">
      <!-- You can toggle select (disabled) -->
      <input type="radio" name="option">
      <i class="toggle icon icon-arrow-down"></i>
      <i class="toggle icon icon-arrow-up"></i>
      <span class="placeholder">Choose...</span>
      <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-speedometer"></i>Speedometer</span>
      </label>
      <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-fire"></i>Fire</span>
      </label>
      <label class="option">
        <input type="radio" name="option" disabled>
        <span class="title animated fadeIn"><i class="icon icon-handbag"></i>Handbag</span>
      </label>
      <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-badge"></i>Badge</span>
      </label>
    </div>
     
    
  • flipbords buttons und animierter orbit bewegung

    No-Library (pure JS), HTML, CSS, JavaScript

    	<div class="flip-boards">
    		<div class="board top">
    			<div class="front">
    				<h2>Front Board</h2>
    			</div>
    
    			<div class="flipped">
    				<h2>Flipped Board</h2>
    			</div>
    		</div>
    
    		 <div class="board left">
    			<div class="front">
    				<h2>Front Board</h2>
    			</div>
    
    			<div class="flipped">
    				<h2>Flipped Board</h2>
    			</div>
    		</div>
    	</div>
    
    	<div class="flip-boards">
    		<div class="board top">
    			<div class="front">
    				<img src="http://lorempixel.com/200/200/" />
    			</div>
    
    			<div class="flipped">
    				<img src="http://lorempixel.com/g/200/200/" />
    			</div>
    		</div>
    
    		 <div class="board left">
    			<div class="front">
    				<img src="http://lorempixel.com/200/200/" />
    			</div>
    
    			<div class="flipped">
    				<img src="http://lorempixel.com/g/200/200/" />
    			</div>
    		</div>
    	</div>
    
    
    
    
    
    
    
    
    
    	<div class="wrapper">
    		
    		<a href="#" class="button green"><div class="light"></div>Click Here</a>
    		<a href="#" class="button red"><div class="light"></div>Click Here</a>
    		<a href="#" class="button blue"><div class="light"></div>Click Here</a>
    		<a href="#" class="button yellow"><div class="light"></div>Click Here</a>
    		<a href="#" class="button grey"><div class="light"></div>Click Here</a>
    		<a href="#" class="button black"><div class="light"></div>Click Here ...</a></div>
  • Loding animationen css

    No-Library (pure JS), HTML, CSS, JavaScript

    <section class="container">
    
    	<div class="aligncenter">
    		<h2>Loading Bars</h2>
    		<div class="loading bar">
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
    		<h2>Bar Spinner</h2>
    		<div class="spinner bar">
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
    		<h2>Circle Spinner</h2>
    		<div class="spinner circles">
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
    		<h2>Facebook Loader</h2>
    		<div class="facebook">
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
            <h2>Spinning Square</h2>
            <div class="spinning-square"></div>
    
            <h2>Spinner Bounce Circle</h2>
            <div class="spinner-bounce-circle">
                <div></div>
                <div></div>
            </div>
    
            <h2>Wave Spinner</h2>
            <div class="spinner-wave">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
    
            <h2>Rotating Cube</h2>
            <div class="spinner-cube">
                <div></div>
                <div></div>
            </div>
    	</div>
    
  • alles mögliche slid in bottom hover bild menü script it jquery einbinden iframe

    jQuery 3.2.1, HTML, CSS, JavaScript

    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript"
    scriptTag.src = "http://www.domain.com/social_media.js";
    scriptTag.async = true ...
  • scroll to top ,ild fehlt noch

    jQuery 3.2.1, HTML, CSS, JavaScript

    var $ = jQuery.noConflict();
    jQuery(document).ready(function( $ ){
        scrollToTop.init( );
    });
    
    var scrollToTop =
    {
        /**
         * When the user has scrolled more than 100 pixels ...
  • alles mögliche buttons topmenü schreibmaschiene selectet

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="square-filler"></div>
    
    
    
    <section class="container">
    
    <div class="display-container">
     <a href="">grün<span class="green">grün</span></a>
    <a href="">blau<span class="blue">blaun</span></a>
     <a href="">red<span class="red">rot</span></a>
     <a href="">gelb<span class="yellow">gelb</span></a>
    
    
    
    
    
    		<h3>Highlight text Blue</h3>
    		<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ...</p></div></section>
  • alles mögliche checkboxen seitenmenü stroke

    No-Library (pure JS), HTML, CSS, JavaScript

    	<section>
    	  <!-- Checbox One -->
    	  <h3>Checkbox One</h3>
    	  	<div class="checkboxOne">
    	  		<input type="checkbox" value="1" id="checkboxOneInput" name="" />
    		  	<label for="checkboxOneInput"></label>
    	  	</div>
    	</section>
    
    	<section>
    	  <!-- Checbox Two -->
    	  <h3>Checkbox Two</h3>
    	  	<div class="checkboxTwo">
    	  		<input type="checkbox" value="1" id="checkboxTwoInput" name="" />
    		  	<label for="checkboxTwoInput"></label>
    	  	</div>
    	</section>
    
    	<section>
    	  <!-- Checbox Three -->
    	  <h3>Checkbox Three</h3>
    	  	<div class="checkboxThree">
    	  		<input type="checkbox" value="1" id="checkboxThreeInput" name="" />
    		  	<label for="checkboxThreeInput"></label>
    	  	</div>
    	</section>
    
    	<section>
    	  <!-- Checbox Four -->
    	  <h3>Checkbox Four</h3>
    	  	<div class="checkboxFour">
    	  		<input type="checkbox" value="1" id="checkboxFourInput" name="" />
    		  	<label for="checkboxFourInput"></label>
    	  	</div>
    	</section>
    
    	<section>
    	  <!-- Checbox Five -->
    	  <h3>Checkbox Five</h3>
    	  	<div class="checkboxFive">
    	  		<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
    		  	<label for="checkboxFiveInput"></label>
    	  	</div>
    	</section>
    
        <div style="clear:both;"></div>
    
        <h2>Flat Checkboxes</h2>
    
        <section>
          <!-- Rounded Checkbox -->
          <h3>Rounded Checkbox</h3>
            <div class="flatRoundedCheckbox">
                <input type="checkbox" value="1" id="flatOneRoundedCheckbox" name="" />
                <label for="flatOneRoundedCheckbox"></label>
                <div></div>
            </div>
        </section>
    
        <section>
          <!-- Flat Checkbox -->
          <h3>Flat Checkbox</h3>
            <div class="flatCheckbox">
                <input type="checkbox" value="1" id="flatOneCheckbox" name="" />
                <label for="flatOneCheckbox"></label>
                <div></div>
            </div>
        </section>
        
        
        
        
        
        
        
        
        	<div>
    		<p class="blackandwhite">Black Stroke</p>
    		<p class="redandblack">Red Stroke ...</p></div>
  • Iframe in neuen tab #4 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    
    
    
    document.getElementById('linkid').onclick = function() {
        var winURL = 'https://googel.de';
        var winName = 'Fenster';
        var winSize = 'width=660,height=620,scrollbars ...
  • 3d würfel drehend

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="stage" style="width: 120px; height: 120px;">
    <div class="cubespinner">
    <div class="face1">1</div>
    <div class="face2">2</div>
    <div class="face3">3</div>
    <div class="face4">4</div>
    <div class="face5">5</div>
    <div class="face6"><img src="/images/homer.jpg"></div>
    </div>
    </div>
  • css bild karuselt

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="stage" style="padding-left: 180px; height: 160px;">
    <div id="spinner" style="-webkit-transform-origin: 180px 0 0;">
    <img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="http://cdn.the-art-of-web.com/images/beach1.jpg" width="200" height="160" alt="">
    <img style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="http://cdn.the-art-of-web.com/images/beach2.jpg" width="213" height="160" alt="">
    <img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="http://cdn.the-art-of-web.com/images/beach3.jpg" width="240" height="160" alt="">
    <img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="http://cdn.the-art-of-web.com/images/beach4.jpg" width="213" height="160" alt="">
    <img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="http://cdn.the-art-of-web.com/images/beach5.jpg" width="238" height="160" alt="">
    </div>
    </div>