by
30 6
1
4
2,138
1
Top 1% !
Famous
Refined
OpenSource
Popularity: 8205th place
Created
Modified Jan 20, 2017

Published on:

No tags for this snippet yet.
Architecturex86_64
Extensionnew 2
LanguagePHP
OSWindows
Windows VersionWindows8

simple Generator duplicate classes CSS

Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/1630392/simple-Generator-duplicate-classes-CSS?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
<?php if(isset($_POST['submit'])){ $count = $_POST['count']; $shag = $_POST['shag']; $prefix = $_POST['prefix']; $postfix = $_POST['postfix']; $attribut = $_POST['attribut']; $znachenie = $_POST['znachenie']; } function rasschet($count, $shag, $prefix, $postfix, $attribut, $znachenie){ $html = ''; for($i = 0; $i<=$count; $i++){ if ($shag != ''){ if($i%$shag == 0){ $html .= ".".$prefix.$i.$postfix." { ".$attribut.": ".$i.$znachenie.";}<br/>"; } } } echo $html; } ?> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>simple Generator duplicate classes CSS</title> </head> <body> <div class="container"> <div class="row"> <div class="page-header"> <h2>Generator duplicate CSS .class {attr: value;}</h2> </div> </div> <div class="row"> <div class="panel-group"><div id="examp" class="panel panel-success"><div class="panel-heading"><a data-toggle="collapse" href="#collapse0" class="btn btn-primary"> <i class="indicator glyphicon glyphicon-collapse-down"></i> Example</a></div><div id="collapse0" class="panel-collapse collapse "><div class="panel-body"> <div class="col-sm-6"> <div class="panel panel-primary"> <div class="panel-heading"><h4>example input:</h4></div> <div class="panel-body"> max volume : 25<br/> step: 5<br/> prefix : max_w<br/> postfix : p<br/> attribute class : max-width<br/> units : % </div> </div> </div> <div class="col-sm-6"> <div class="panel panel-primary"> <div class="panel-heading"><h4>example out:</h4></div> <div class="panel-body"> <code>.max_w0p { max-width: 0%;}<br/> .max_w5p { max-width: 5%;}<br/> .max_w10p { max-width: 10%;}<br/> .max_w15p { max-width: 15%;}<br/> .max_w20p { max-width: 20%;}<br/> .max_w25p { max-width: 25%;}</code> </div> </div> </div> </div></div></div></div> </div> <div class="row"> <div class="col-md-6"> <div class="thumbnail"> <form action="service_css.php" method="post"> <div class="form-group"><input type="text" name="count" value="" placeholder="max volume attribute of class" class="form-control"></div> <div class="form-group"><input type="text" name="shag" value="" placeholder="step volume" class="form-control"></div> <div class="form-group"><input type="text" name="prefix" value="" placeholder="prefix of name css class" class="form-control"></div> <div class="form-group"><input type="text" name="postfix" value="" placeholder="postfix of name css class" class="form-control"></div> <div class="form-group"><input type="text" name="attribut" value="" placeholder="attribute class" class="form-control"></div> <div class="form-group"><input type="text" name="znachenie" value="" placeholder="units: em, rem, px, pt or %" class="form-control"></div> <div class="form-group"><input type="submit" name="submit" value="Submit" class="btn btn-success btn-block"></div> </form> </div> </div> <div class="col-md-6"> <div class="thumbnail"> <?php //echo $html; rasschet($count, $shag, $prefix, $postfix, $attribut, $znachenie); ?> </div> </div> </div> </div> <!-- Latest compiled and minified CSS & JS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="//code.jquery.com/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> function toggleChevron(e) { $(e.target) .prev('.panel-heading') .find("i.indicator") .toggleClass('glyphicon-collapse-down glyphicon-collapse-up'); } $('#examp').on('hidden.bs.collapse', toggleChevron); $('#examp').on('shown.bs.collapse', toggleChevron); </script> </body> </html>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus