Marathi

आपले स्वागत आहे SimplyCode

simplycode हि एक अशी website आहे जी अगदी कमी शब्दात आणि सोप्या मराठी आणि English भाषेत तुम्हाला वेब च्या बाबतीत design किंवा developing च योग्य ते मार्गदर्शन तुम्हाला करणार आहे. त्या साठी जाणून घ्या तुमचे आवडते खालील विषय.

English

Welcome to SimplyCode

Simplycode will help to learn code in simple language which can be easily cope with challenges which any fresher faces while start his journey in IT or any web domain.Our code should not be compressed omtially. It should be in easy manner step by step. eg. start with simple div let him have knowledge of table and div. why and whereto use div. bla bla. it should be kind of spoon feeding . so users will attract in visit. it will be syllabus base kind of thing.

Design and development Topic View All

html5

HTML

HTML is a major Web technology that defines the structure of a webpage.

CSS3

CSS is a stylesheet language that describes the presentation of an HTML.

PHP

PHP is a server-side scripting language designed for web development.

BOOTSTRAP

Bootstrap is the most popular HTML, CSS, and JS framework.

Latest PostView All

EasyTree! jquery tree menu

DEMO DOWNLOAD HOW USE IT

EasyTree is a small but lightweight JS Menu system designed to be easy to set up but still have a rich set of features and be capable of more complex scenarios. A basic EasyTree menu can be seen in use for the left navigation of this site!

Ultimate image hover effects

DEMO DOWNLOAD
Today I share with you modern design image hover effects using CSS3. In the previous month, I was created ultimate button hover effects that are easy to implement with your HTML pages. And now, create image hover effects which are perfect for portfolio or product listings. For this image animation effects I use transform, translate, transition properties of CSS3.

HTML

<div class="effect-1">
<div class="image-box">
<img src="img-2.jpg" alt="Image-3">
</div>
<div class="text-desc">
<h3>Your Title</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn">Learn more</a></div></div>

CSS

.effect-1{
  float: left; 
  width: 340px; 
  position: relative; 
  overflow: hidden; 
  text-align: center; 
  border: 4px solid rgba(255, 255, 255, 0.9); 
  overflow: visible;
}
.effect-1 img{
  transition: 0.5s;
}
.effect-1:hover img{
  transform: scale(0.3) translateY(-110%);
  position: relative; 
  z-index: 9;
} .effect-1 .text-desc{
  transform: translateY(100%); 
  opacity: 0; 
  padding: 85px 20px 10px; 
  transition: 0.5s;
} .effect-1:hover .text-desc{
  transform: translateY(0px); 
  opacity: 1;
}

JS

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>
<script> $(".project").hover3d({ selector: ".project__card" }); </script>

jQuery Hover3d

DEMO DOWNLOAD HOW TO USE

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect.

HTML

<div class="project">
<div class="project__card">
<!-- Content element goes here -->
</div>
</div>

CSS

.hover-in{
transition: .3s ease-out;
}
.hover-out{ transition: .3s ease-in; }

JS

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>
<script> $(".project").hover3d({ selector: ".project__card" }); </script>