CSS & CSS3's Articles

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

How to show and hide dropdown menu on mouse hover using CSS
Use the CSS :hoverpseudo-class If you simply want to show and hide dropdown menu on mouse hover you don't need any JavaScript. You can do this simply using the CSS display property and :hover pseudo-class. The following example will show you how to implement a simple dropdown using the CSS. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Show Hide Dropdown Using CSS</title> <style> ul{ padding: 0; list-style: none; background: #f2f2f2; } ul li{ display: inline-block; position: relative; line-height: 21px; text-align: left; } ul li a{ display: block; padding: 8px 25px; color: #333; text-decoration: none; } ul li a:hover{ color: #fff; background: #939393; } ul li ul.dropdown{ min-width: 100%; /* Set width of the dropdown */ background: #f2f2f2; display: none; position: absolute; z-index: 999; left: 0; } ul li:hover ul.dropdown{ display: block; /* Display the dropdown */ } ul li ul.dropdown li{ display: block; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#">Products ▾</a> <ul class="dropdown"> <li><a href="#">Laptops</a></li> <li><a href="#">Monitors</a></li> <li><a href="#">Printers</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </body> </html>  
PHP - How To Integrate Paypal Payment Gateway In PHP
Today, laravelcode share with you how to integrate paypal payment gateway in php with sample code. currently many payment gateway in available in market, but i thinks paypal is most populer for make payment in online and integrate in most of website and even android application also. In this tutorials we are make one simple add to cart with paypal payment ussing by simple html, css and php, simply follow this step and easaly integrate paypal in your php code. [ADDCODE] Create index.php: In the first step create index.php file in your any blank folder and put into it following code. we are using simple boostrap layout for pay with paypal and make simple add to cart design if you copy and past this following code and then run your index file your html output looking like that. show this screenshot. <!DOCTYPE html> <html> <head> <title>LaravelCode - Paypal Integration Demo In PHP</title> <link rel="stylesheet" type="text/css" href=""> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <?php // test url $paypalUrl=''; // live url $paypalUrl=''; $paypalId=''; ?> <div id="app"> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <!-- Collapsed Hamburger --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Branding Image --> <a class="navbar-brand" href=""> LaravelCode Demo </a> </div> <div class="collapse navbar-collapse" id="app-navbar-collapse"> <!-- Left Side Of Navbar --> <ul class="nav navbar-nav">   </ul> <!-- Right Side Of Navbar --> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div class="panel panel-default"> <div class="panel-heading">Products List</div> <div class="panel-body"> <div class="col-md-4"> <form action="<?php echo $paypalUrl; ?>" method="post" name="frmPayPal1"> <input type="hidden" name="business" value="<?php echo $paypalId; ?>"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="item_name" value="It Solution Stuff"> <input type="hidden" name="item_number" value="2"> <input type="hidden" name="amount" value="84"> <input type="hidden" name="no_shipping" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="cancel_return" value="/cancel.php"> <input type="hidden" name="return" value="/success.php"> <figure class="snip1249"> <div class="image"> <img src="" alt="sample85"/><i class="ion-ios-star-outline"></i> </div> <figcaption> <h3>Time Piece</h3> <p>I'm killing time while I wait for life to shower me with meaning.</p> <div class="price"> <s>$99.00</s>$84.00 </div> <button class="add-to-cart">Pay By Paypal</button> </figcaption> </figure> </form> </div> </div> </div> </div> </div> </div> </div> <script src=""></script> </body> </html> Create style.css: Now, create style.css file for pay by paypal product layout, and put into it simple this css code. /* Icon set - */ @import url(; @import url(,500); figure.snip1249 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; /*min-width: 220px;*/ /*max-width: 310px;*/ /*width: 100%;*/ background: #1a1a1a; color: #ffffff; text-align: left; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); } figure.snip1249 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } figure.snip1249 .image { position: relative; } figure.snip1249 img { max-width: 100%; vertical-align: top; } figure.snip1249 i { position: absolute; top: 7px; left: 12px; font-size: 32px; opacity: 0; z-index: 2; -webkit-transition-delay: 0; transition-delay: 0; } figure.snip1249 h3 { margin: 0; font-weight: 500; text-transform: uppercase; } figure.snip1249:before, figure.snip1249:after { width: 120px; height: 120px; position: absolute; top: 0; left: 0; content: ''; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; z-index: 1; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.snip1249:before { background-color: #20638f; -webkit-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); border-right: 1px solid #20638f; } figure.snip1249:after { background-color: #962d22; -webkit-transform: skew(-45deg) translateX(-175%); transform: skew(-45deg) translateX(-175%); border-right: 1px solid #962d22; } figure.snip1249 figcaption { padding: 25px 80px 25px 25px; background-color: #ffffff; color: #000000; position: relative; font-size: 0.9em; } figure.snip1249 figcaption p { margin-bottom: 15px; } figure.snip1249 figcaption:before { width: 150px; height: 150px; position: absolute; bottom: 0; right: 0; content: ''; z-index: 1; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%); background-color: #20638f; -webkit-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); border-right: 1px solid #20638f; } figure.snip1249 .add-to-cart { display: inline-block; width: auto; border: 2px solid #20638f; padding: 0.4em 0.6em; color: #20638f; text-decoration: none; font-weight: 800; font-size: 0.9em; text-transform: uppercase; } figure.snip1249 .add-to-cart:hover { background-color: #20638f; color: #ffffff; } figure.snip1249 .price { position: absolute; right: 0; bottom: 0; color: #ffffff; z-index: 2; text-transform: uppercase; padding: 20px; font-weight: 800; font-size: 1.2em; text-align: center; } figure.snip1249 .price s { display: block; font-size: 0.85em; font-weight: 400; opacity: 0.8; } figure.snip1249:hover i, figure.snip1249.hover i { opacity: 0.7; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } figure.snip1249:hover h3, figure.snip1249.hover h3 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } figure.snip1249:hover:before, figure.snip1249.hover:before { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } figure.snip1249:hover:after, figure.snip1249.hover:after { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: skew(-45deg) translateX(-75%); transform: skew(-45deg) translateX(-75%); } /* Demo purposes only */ body { /*background-color: #212121;*/ } Create success.php: Now, create success.php file. if your paypal payment pay successfully then after payment user redirect on this file. you can manage here your database logic. like insert data in database and show success message to user. $itemNo = $_REQUEST['item_number']; $itemTransaction = $_REQUEST['tx']; // Paypal transaction ID $itemPrice = $_REQUEST['amt']; // Paypal received amount $itemCurrency = $_REQUEST['cc']; // Paypal received currency type $price = '20.00'; $currency='USD'; if($itemPrice==$price && $itemCurrency==$currency) { echo "Payment Successful"; } else { echo "Payment Failed"; } Create cancel.php: Last create one another file cancel.php for in-case paypal payment have some issue then user redirect on Cancel.php file after canceletion and here you can manage cancel message. echo "Payment Canceled"; We are hope you like this tutorials, if any question regarding any query please post your question in our forums click on bellow link Laravelcode's Forums
Show Image Preview Before Upload In jQuery Bootstrap Example
Today, Laravelcode share one helpfull tutorials about jquery and bootstrap. in this tutorials we are show you how to show image preview before upload. We are need some time this type functionality in frontend site which you want to show image preview before it upload in server. resently we are working on one laravel application and we are need this so we are make one simple script for it using jquery and bootstrap. and we are finaly done this with jquery and bootstrap. Here, we are always share our code and example which we are facing in our devloping mode and when we are find finaly solution about it the we are also share with you. You can try this example with bootstrap because we are using bootstrap for fine layout. Step : 1 HTML code look like <!DOCTYPE html> <html> <head> <title>Show Image Preview Before Upload</title> <link rel="stylesheet" type="text/css" href=""> <script src=""></script> <script src=""></script> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="input-group image-preview"> <span class="input-group-btn"> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="glyphicon glyphicon-remove"></span> Clear </button> <div class="btn btn-default image-preview-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="image-preview-input-title">Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> </div> </span> </div> </div> </div> </div> </body> </html> Step : 2 CSS code look like Then add some css code copy following code and add in your css file. .image-preview-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .image-preview-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .image-preview-input-title { margin-left:2px; } Step : 3 jQuery code look like [ADDCODE] The finaly add following jQuery code in js file. $(document).on('click', '#close-preview', function(){ $('.image-preview').popover('hide'); // Hover befor close the preview $('.image-preview').hover( function () { $('.image-preview').popover('show'); }, function () { $('.image-preview').popover('hide'); } ); }); $(function() { // Create the close button var closebtn = $('<button/>', { type:"button", text: 'x', id: 'close-preview', style: 'font-size: initial;', }); closebtn.attr("class","close pull-right"); // Set the popover default content $('.image-preview').popover({ trigger:'manual', html:true, title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML, content: "There's no image", placement:'bottom' }); // Clear event $('.image-preview-clear').click(function(){ $('.image-preview').attr("data-content","").popover('hide'); $('.image-preview-filename').val(""); $('.image-preview-clear').hide(); $('.image-preview-input input:file').val(""); $(".image-preview-input-title").text("Browse"); }); // Create the preview image $(".image-preview-input input:file").change(function (){ var img = $('<img/>', { id: 'dynamic', width:250, height:200 }); var file = this.files[0]; var reader = new FileReader(); // Set preview image into the popover data-content reader.onload = function (e) { $(".image-preview-input-title").text("Change"); $(".image-preview-clear").show(); $(".image-preview-filename").val(; img.attr('src',; $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show"); } reader.readAsDataURL(file); }); }); Now we are ready to run our example so run bellow command ro quick run: If you face any problem then please write a comment or give some suggestions for improvement. Thanks...