recentpopularlog in

neerajsinghvns : css   160

« earlier  
Animate.css
https://daneden.github.io/animate.css/ ;;;
tags: needsEditing animate.css animate css animation gitHub ;;;
needsEditing  animate.css  animate  css  animation  gitHub 
9 weeks ago by neerajsinghvns
CSS Expand / Collapse
https://codepen.io/mrmrp/pen/RPKYPW ;;; Original by Manas Ranjan Pradhan
tags: html CSS Expand / Collapse codePen ;;;
-
https://codepen.io/ngsshv/pen/WPWXaQ ;;; 20190220-1256pm; showMultipleLines.
https://codepen.io/ngsshv/pen/wNNpXy ;;; 20190219-1018am; grey shadow.
https://codepen.io/ngsshv/pen/WPPdJy ;;; 20190218-2352;;; orange shadow
https://codepen.io/ngsshv/pen/BMMJJm ;;; 20190218-2347;;;
html  CSS  Expand  /  Collapse  codePen  CanShowMultipleLinesInCollapsedState 
february 2019 by neerajsinghvns
CSS border styles - JSFiddle
https://jsfiddle.net/peterjmag/uexma4o6/ ;;;
tags: CSS border styles - JSFiddle || sampleCode style color colors ;;;
CSS  border  styles  -  JSFiddle  ||  sampleCode  style  color  colors  div 
february 2019 by neerajsinghvns
W3Schools How TO - Code snippets for HTML, CSS and JavaScript
https://www.w3schools.com/howto/default.asp ;;;
tags: W3Schools How TO - Code snippets for HTML CSS and JavaScript HowTo needsEditing ;;;
W3Schools  How  TO  -  Code  snippets  for  HTML  CSS  and  JavaScript  HowTo  needsEditing 
december 2018 by neerajsinghvns
How To Create a List Group with CSS
margin-top: -1px; /* Prevent double borders
How  To  Create  a  List  Group  with  CSS  w3schools  prevent  double  border 
december 2018 by neerajsinghvns
HTML button tag
-
<button type="button">Click Me!</button>
-
w3schools  css  html  button  clickable  needsEditing 
december 2018 by neerajsinghvns
CSS object-fit Property
https://www.w3schools.com/css/css3_object-fit.asp ;;;
-
tags: w3schools css html image needsEditing on resize resizing the aspect ratio of photo photograph is preserved and not destroyed ;;;
-
In the next example, we use object-fit: cover;, so when we resize the browser window, the aspect ratio of the images is preserved:
w3schools  css  html  image  needsEditing  on  resize  resizing  the  aspect  ratio  of  photo  photograph  is  preserved  and  not  destroyed 
december 2018 by neerajsinghvns
Tryit Editor v3.6
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
-
tags: w3schools css html sticky needsEditing heading stops scroll scrolling when it reaches the top of the screen ;;;
w3schools  css  html  sticky  needsEditing  heading  stops  scroll  scrolling  when  it  reaches  the  top  of  screen 
december 2018 by neerajsinghvns
CSS Backgrounds
https://www.w3schools.com/code/tryit.asp?filename=FXTHOEQAT1TO ;20181203-0025am
-
https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position ;;;
-
https://www.w3schools.com/css/css_background.asp ;;;
-
tags: w3schools CSS HTML needsEditing background all backgound-image image its position ;;;
-
Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:
-
w3schools  CSS  HTML  needsEditing  background  all  backgound-image  image  its  position  sampleCode 
december 2018 by neerajsinghvns
CSS Buttons
-
https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic
<a href="#" class="button">Link Button</a>
-
Shadow Buttons
https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover ;;;
-
https://www.w3schools.com/css/css3_buttons.asp
-
tags: w3schools css html button transition needsEditing clickable href hyperlink Link ;;;
-
Hoverable Buttons; transition duration.
w3schools  css  html  button  transition  needsEditing  clickable  href  hyperlink  Link 
december 2018 by neerajsinghvns
How To Create A Zebra Striped Table
https://www.w3schools.com/code/tryit.asp?filename=FXTGWWUIQ5AF ;20181202-2358 ;;;
https://www.w3schools.com/code/tryit.asp?filename=G363GJ644SJ3 ;;; 20190416-1507; similar to sample below; more choices;
https://www.w3schools.com/code/tryit.asp?filename=G359MPDVIMAI ;;; 20190415-2154; columns of different widths; cells or column merge in different rows; "colSpan"
https://www.w3schools.com/tags/att_td_colspan.asp ;;;
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro ;;; zebra
https://www.w3schools.com/howto/howto_css_table_zebra.asp ;zebra; text-align:left;;
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table ;;; can be used instead of tab tabs
https://www.w3schools.com/html/html_tables.asp ;;;
-
Columns heading are bold.
tags: w3schools css html zebra stripe striped table needsEditing no vertical line between columns alternate colors row shaded colspan col span mergeCell merge cell alternating and background be can Color gray instead of tab Tables tabs used white ;;;
w3schools  css  html  zebra  stripe  striped  table  needsEditing  no  vertical  line  between  columns  alternate  colors  row  shaded  colspan  col  span  mergeCell  merge  cell  alternating  and  background  be  can  Color  gray  instead  of  tab  Tables  tabs  used  white 
december 2018 by neerajsinghvns
How To Create a Read More Read Less Button
https://www.w3schools.com/howto/howto_js_read_more.asp ;;;
tags: w3schools css html readMore readLess read more less expand collapse needsEditing ;;;
w3schools  css  html  readMore  readLess  read  more  less  expand  collapse  needsEditing 
december 2018 by neerajsinghvns
How To Create a Hero Image
https://www.w3schools.com/code/tryit.asp?filename=FXTFHAX4OLCR ;20181202-2309 ;;;
https://www.w3schools.com/code/tryit.asp?filename=FXTF9NKOI096 ;20181202-2303 ;;;
https://www.w3schools.com/howto/howto_css_hero_image.asp ;;;
-
tags: w3schools css html landing page fullscreen or hero image and1 howto adjust location of text and clickAble button ;;;
w3schools  css  html  landing  page  fullscreen  or  hero  image  and1  howto  adjust  location  of  text  and  button  clickAble  sampleCode 
december 2018 by neerajsinghvns
CSS Multiple Backgrounds
https://www.w3schools.com/css/css3_backgrounds.asp
tags: w3schools CSS HTML landing page with full screen and1 multiple background image and2 button needsEditing ;;;
-
search for:
Hero Image
You could also use different background properties on a <div> to create a hero image (a large image with text), and place it where you want.
w3schools  CSS  HTML  landing  page  with  full  screen  and1  multiple  background  image  and2  button  needsEditing 
december 2018 by neerajsinghvns
CSS Image Gallery
https://www.w3schools.com/css/css_image_gallery.asp ;;;
tags; w3schools css html RWD responsive image images gallery for screens of different width i.e. laptop iPad iPhone needsEditing ;;;
w3schools  css  html  RWD  responsive  image  images  gallery  for  screens  of  different  width  i.e.  laptop  iPad  iPhone  needsEditing 
december 2018 by neerajsinghvns
Full Screen Landing Page Image with HTML & CSS [How-To] - YouTube
tags: Full Screen Landing Page Image with HTML & CSS [How-To] - YouTube | video website Like Tesla with multiple images on the home page ;;;
Full  Screen  Landing  Page  Image  with  HTML  &  CSS  [How-To]  -  YouTube  |  video  website  Like  Tesla  multiple  images  on  the  home 
november 2018 by neerajsinghvns
Highlighting Text | Working with Text in HTML | Peachpit
http://www.peachpit.com/articles/article.aspx?p=2124990&seqNum=15 ;;;
-
searchFor
Since mark is new in HTML5, older browsers don’t render a background color by default. You can instruct them to do so by adding mark { background-color: yellow; } to your style sheet.
Highlighting  Text  |  Working  with  in  HTML  ||  Peachpit  |||  mark  needsEditing  css  Search  searchFor 
november 2018 by neerajsinghvns
Simple usage - JSFiddle
tags: Simple usage - JSFiddle | howto add comment comments from css ( not html ) on to the page display displayed web needsEditing ;;;
Simple  usage  -  JSFiddle  |  howto  add  comments  from  css  (  not  html  )  on  to  the  page  display  displayed  web  needsEditing  comment  code  sampleCode 
november 2018 by neerajsinghvns
10 Beautiful CSS Text Effects
https://cssnewbie.com/10-beautiful-css-text-effects/#.W-3l2zhKhhE ;;;
tags: 10 Beautiful CSS Text Effects | shadow fog HTML needsEditing codePen animated signature ;;;
10  Beautiful  CSS  Text  Effects  |  shadow  fog  HTML  needsEditing  codePen  animated  signature 
november 2018 by neerajsinghvns
CSS Tables: Simple table - JSFiddle
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}

.zui-table tbody tr:nth-child(even) {
background-color: #dddddd;
}
CSS  Tables  :  Simple  table  -  JSFiddle  Dimitar  Ivanov 
november 2018 by neerajsinghvns
CSS Units
https://www.w3schools.com/cssref/css_units.asp ;;;
tags: CSS Units fontSize font size search for em rem vw vh vmin vmax ;;;
tags:: w3schools CSS Units fontSize font size search for em rem vw vh vmin vmax fontSize relatve to viewport screen width
w3schools  CSS  Units  fontSize  font  size  search  for  em  rem  vw  vh  vmin  vmax  relatve  to  viewport  screen  width  needsEditing 
november 2018 by neerajsinghvns
Cascading Drop-down Navigation Menu with CSS (Part 2) - YouTube
https://www.youtube.com/watch?v=T7ayE5AtRUA ;;;-
-
tags: HTML CSS cascading dropDown nav navigation menu youTube video by ralph needsEditing howTo create build convert hyperlink to button ;;;
-
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:15; refresh of what was done in Part 1.
01:05; horizontal layout / list; {float: left};
11:10; submenus disappear;
11:25; positioning of sub2;
12:00; move sub2 from below to right;
13:00; make sure that borders touch to ensure that menu items stay open.
16:10; give a visual indicator about which items have submenus;
HTML  CSS  cascading  dropDown  nav  navigation  menu  youTube  video  by  ralph  needsEditing  howTo  create  build  convert  hyperlink  to  button 
october 2018 by neerajsinghvns
YouTube; Cascading Drop-down Navigation Menu with CSS (Part 1)
https://m.youtube.com/watch?v=TmQm-p3wCSU ;;;
-
tags: dropDown menu youTube video by ralph needsEditing howTo create build HTML CSS cascading nav navigation howto instead of just the hyperlinks, the entire button becomes a hyperlink link ;;;
-
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
10:45; positioning of hyperlinks.
11:47; convert un-ordered list of hyperlinks to positioning them like a set of drop down menus.
displaying anchor tags; code> ul#navmenu a { }.
12:10; get rid of underline; {text decoration: none}
12:15; convert inline element anchor tags in to block elements. {display: block;}
12:25; make list items behave more like buttons. instead of just the hyperlinks, the entire button becomes a hyperlink.
12:50;
{display: block;
width: 125px;
height: 25px;
}
dropDown  menu  youTube  video  by  ralph  needsEditing  howTo  create  build  HTML  CSS  cascading  nav  navigation  instead  of  just  the  hyperlinks  entire  button  becomes  a  hyperlink  link 
october 2018 by neerajsinghvns
<img height=""> »
https://html.com/attributes/img-height/
-
tags: html css img image height width why HowTo ;;;
---
Search = "annoying, glitchy page jump when the other elements on the page move to accommodate each image as it loads"
-
Why indicate the height?
Typically, with modern web design layout, you do not specify the height of an image or other element. The rendered, display height is a result of the width. (Hence the prevalent use of height: auto; in CSS layouts). For example, given an image with an intrinsic size of 200 px by 100 px (2:1 aspect ratio), if the rendered width is 150px, the rendered height will be 75%. Why does this matter? The browser doesn't know what the intrinsic size of an image is until it has downloaded and inspected it. So, until that happens, it doesn't know how much space to allot to it on page. Depending on the way the layout is structured, it can often (not always) figure out the width, but it won't be able to figure out the rendered height without information on the image's actual proportions. This causes an annoying, glitchy page jump when the other elements on the page move to accommodate each image as it loads. On a page with a lot of images, this can be a real problem. The simple solution is to include information about an image's height and width in the markup. You still need to specify the display size in the CSS, but providing information about the file will help browsers render the page faster and more accurately.

.img-full { max-width: 100%; height: auto; }
<img src="/wp-content/uploads/very-large-flamingo.jpg" width="1280" height="850">


Read more: https://html.com/attributes/img-height/#ixzz5UwrZRvPJ
html  css  img  image  height  width  why  HowTo 
october 2018 by neerajsinghvns
Tryit Editor v3.5
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_letter-spacing ;;;
tags: CSS letter-spacing property | html font character letter horizontal spacing property w3schools sampleCode ;;;
https://www.w3schools.com/code/tryit.asp?filename=FWAIYPODA816 ;;;20181016-1222
CSS  letter-spacing  property  |  html  font  character  letter  horizontal  spacing  gap  w3schools  sampleCode 
october 2018 by neerajsinghvns
CSS letter-spacing property
CSS letter-spacing property | html font character letter horizontal spacing property w3schools ;;;
CSS  letter-spacing  property  |  html  font  character  letter  horizontal  spacing  w3schools 
october 2018 by neerajsinghvns
CSS Height and Width Dimensions
https://www.w3schools.com/css/css_dimension.asp ;;;
tags: CSS Height and Width Dimensions | wide needsEditing add @media with screenWidth to this ;;;
w3schools  CSS  Height  and  Width  Dimensions  |  wide  percent  percentage  needsEditing  add  @media  with  screenWidth  to  this 
january 2018 by neerajsinghvns
Simple CSS Notes - Front end development blog
http://blog.simplecss.eu/ ;;;
tags: Simple CSS Notes - Front end development blog | website setup layout ;;;
Simple  CSS  Notes  -  Front  end  development  blog  |  website  setup  layout 
january 2018 by neerajsinghvns
CSS border-radius property
https://www.w3schools.com/cssref/css3_pr_border-radius.asp ;;;
tags: CSS border-radius property | border radius different corners topLeft topRight bottomRight bottomLeft ;;;
CSS  border-radius  property  |  border  radius  different  corners  topLeft  topRight  bottomRight  bottomLeft 
december 2017 by neerajsinghvns
How To Make a Modal Box With CSS and JavaScript
https://www.w3schools.com/howto/howto_css_modals.asp ;;;
tags: HowTo Make a Modal Box With CSS and JavaScript | similar to big toolTip w3schools ;;;
HowTo  Make  a  Modal  Box  With  CSS  and  JavaScript  |  similar  to  big  toolTip  w3schools 
december 2017 by neerajsinghvns
CSS column-fill property
https://www.w3schools.com/cssref/css3_pr_column-fill.asp ;;;
tags: CSS column-fill property newPaper column balance load height w3schools ;;;
CSS  column-fill  property  newPaper  column  balance  load  height  w3schools 
december 2017 by neerajsinghvns
css position property tutorial ( fixed, absolute, relative, static ) - YouTube
https://www.youtube.com/watch?v=-vo0HzNHL3U;;;
tags: css position property tutorial ( fixed, absolute, relative, static ) - YouTube | video TechSith needsEditing ;;;
css  position  property  tutorial  (  fixed  absolute  relative  static  )  -  YouTube  |  video  TechSith  needsEditing  HowTo 
december 2017 by neerajsinghvns
(1) CSS POSITIONING (PART1) - YouTube
https://www.youtube.com/watch?v=kejG8G0dr5U;;;
tags: CSS POSITIONING (PART1) - YouTube | video needsEditing questionable static relative sourceCode source code devTips ;;;
CSS  POSITIONING  (PART1)  -  YouTube  |  video  needsEditing  questionable  static  relative  sourceCode  source  code  devTips 
december 2017 by neerajsinghvns
CSS Box Model
tags: CSS Box Model | w3schools margin margins padding paddings needsEditing ;;;
CSS  html  Box  Model  |  w3schools  margin  margins  padding  paddings  needsEditing 
december 2017 by neerajsinghvns
How To Create a Full Page Image
https://www.w3schools.com/code/tryit.asp?filename=FXTFTL623MO3 ;20181202-2322;
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page ;;;
https://www.w3schools.com/howto/howto_css_full_page.asp;;;
search: How To Create a Full Height Image
-
tags: How To Create a Full Page Image | landing html css needsEditing questionable responsive page w3schools ;;;
How  To  Create  a  Full  Page  Image  |  landing  html  css  needsEditing  questionable  responsive  w3schools 
december 2017 by neerajsinghvns
(3) Full Screen Landing Page - Responsive HTML5/CSS3 Tutorial - YouTube
https://www.youtube.com/watch?v=Y5SHm53WFEk;;;
tags: Full Screen Landing Page - Responsive HTML5 / CSS3 Tutorial YouTube | video html css needsEditing questionable ;;;
-
Software used to create the *.html and *.css files
Sublime Text or Brackets.
-
responsive background image; desktop to smartphone.
-
01:25; software used;
- sublimeText
- Brackets
09:15; html file &
09:30; css file
20:40; text-transform: uppercase; /*change text to UPPER Case*/
20:50; text-decoration: none; /*link should not have an underline*/
23:55; responsive; @media...
Full  Screen  Landing  Page  -  Responsive  HTML5  /  CSS3  Tutorial  YouTube  |  video  html  css  needsEditing  questionable  background  image  home  homePage 
december 2017 by neerajsinghvns
How to create Dropdown Menu/Navigation Bar in Html and CSS (Hindi/Urdu) - YouTube
https://www.youtube.com/watch?v=ZK1l2f1QkrY;;;
tags: How to create Dropdown Menu / Navigation Bar in Html and CSS ( Hindi / Urdu ) - YouTube | video questionable needsEditing ;;;
(3)  How  to  create  Dropdown  Menu  /  Navigation  Bar  in  Html  and  CSS  (  Hindi  Urdu  )  -  YouTube  |  video  questionable  needsEditing  SampleCode 
december 2017 by neerajsinghvns
« earlier      
per page:    204080120160

Copy this bookmark:





to read