CodemySite_Web development

According to this demo,I figure out two questions.First one is how to creat the plus icon using  pseudo element.Second one is how to change the plus icon color and border color simultaneously,as we known, the basic way is seperately setting the three parts hover stylings. In HTML section,it's basic to build a div classed add without content. In CSS section, there are some points to pay attention. 1.display:inline-block can be contained the plus in the middle of border. 2.color:#ccc is the basic color which is the same one of plus icon and border. 3.transition can change the color for both, because we didn't write down the border color. The main point is the color and border-color is the same,when you didn't specific the border-color. 4.the .add div is the relative,and the :before and :after are absolute which can bulid a crossing.  5.calculating the width and height for plus icon,and moving to shape what we need. 6.when we hover the .add,the only way

Enjoying the images gallery is a fancy thing. It's always shown on photograpy and  e-commercial websites.  The plugin called FancyBox is a amazing stuff which is easy to apply to your sites such as the animation above.  First, it's basic to link the jQuery and fancybox js file which are downloaded from the  https://github.com/fancyapps/fancyBox  and also you can check the documents.  Secondly,the HTML contained the five pictures with link you can click on.  Lastly,jQuery is about fancybox(), the helpers, buttons,thumbs,openEffect,closeEffect.  helper: button{} is the control button at the top of page. thumbs{}is the thumbs of pictures at the bottom of the page,which can be set the width and height. title{} is the descriptions of the pictures below it,which have four type:inside,outside,over,float. openEffect and closeEffect are elestic,none or fade.  preEffect :'none', nextEffect :'none' My demo free download  here

When we tours the shopping websites, the products pictures sometimes show as normal size.  If we wanna look up the detail large pictures, the better convient way is to click. Here I monitor the gallary called Lightbox without JavaScript and the code is clear and simple. HTML contains the small picture with a link to the large picture. The large picture classed lightbox can be click.  CSS is clear for the main elements. Becauuse of the same picture, I set the max-width to resize the image,such as 20% of small picture and 80% of large picture.  The lightbox firstly should be hide with display:none.  z-index is larger than the small picture 0. The background is responsive with browser size for 100% fixed.   When users target the lightbox, the large picture show up and hide. Moreover, I notice there is a default blue outline in Chrome browser,so the outline sets to none.  Full code in my Codepen  Here

Scroll indicator is a better experience for users when surfing the article page. This styling could be with Javascript, and here also only css.  HTML is contained two parts: the fixed header with the title, and the main part with the article details.   The header should be fixed for good looking. And the main part move down more than the height of header using margin-top.  Setting padding to percenetage makes the content in the center of the page ,which is responsive website.  @supports   The  @supports   CSS   at-rule  associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a  supports condition . @supports ( prop : value ) { /* more styles */ } height:100vh means the height of display window.  Giving the body a background, linear

There is a manual slider called View Switcher. Although it is kinds of nude for users, the benefit is lasts as long as users like for each image manually.  The slider contains the four images and a list of click button. The point is that image's Id name is the same as the click href URL, which can be connected respectively.  The outer slider should be the box shown one image each time,using overflow:hidden.  When users target the the img,the opacity:1. When users leave the target, the opacity:0. Meanwhile, when first load the page, the target should be on slide-1 which means showing the first image.  Then style the list part. The ul position should be absolute and li background is the circle using border-radius. Float:left means the list is horizental.  You can look up in my codepen  Here

When you click a button,the message would pop out as a box. The message box lead me thinking about alert(), which is the ancestor of pop out methods. Here I choose no JavaScrit to accomplish it.  HTML part contained a button which will be shown at beginning of the screen and the div named box. The span is the close icon at the top-right corner using × .  Of course, you should link the css file inside the head.  The body and the box element should be in the center vertically and horizentally. Using display:flex and align-item,justify-content for center respectively. Firstly, the messsage box should be hidden using opacity and visibility,when focusing button, the box shows up in the fixed position. To smooth the animation of showing box, I apply the CSS3 transition.  The demo free download here. Download  

Actually I'm a new learner with JavaScript and always being frustrated by the mingle code. I prefer no JavaScript which means easier and more readable, thankful to CSS3 skills of animation. I think Slider is the first step when you begin to learn JavaScript and the result looks fantanstic and attractive. Now I'm trying to bulid a image sliders without JavaScript.  The result has been shown at the beginning. Here we go to the code part. HTML part is contained three DOM layer such as the ID called slider(the outer frame),the slide-holder(the content stored all images) and the slide (each image is a slide). Here I got three images in the holder. The slider div is the eara which can be shown in the grey border. CSS part is decorated the style. The holder width should be wide enough to contain all the images which is bigger than the total width of all images. The moving animation comes from the CSS3 which lasts 10s and works permanently. The keyframe called scroller i

JavaScript正变得越来越流行，它已经成为前端开发的第一选择，并且利用基于JavaScript语言的NodeJS，我们也可以开发出高性能的后端服务，甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。 但用好JavaScript并不容易，你除了需要掌握它的语法并知道如何写出高质量的代码之外，还需要了解如何解决那些几乎在每个项目中都会遇到的需求场景，比如：判断日期，高亮文本，限制字符数等等，有很多第三方库可以解决这些问题，但这些库可能并非只是为解决这一个问题而创建的，这意味着你需要引入了很多无关的代码，这将使你的整个系统变得臃肿，而且也会影响到系统的性能。 我的做法是，收集和使用那些常见的JavaScript代码段，并在需要时，尽可能首先使用它们 。下面便是我收集的10段实用JavaScript代码，基于它们你还可以创造出更强大的JS插件或功能函数。 1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单，很难满足真实项目中对不同日期格式进行解析和判断的需要。JQuery也有一些第三方库来使日期相关的处理变得简单，但有时你可能只需要一个非常简单的函数，而不想引入一个庞大的第三方库。这时，你可以使用下面这段日期校验代码，它允许你自定义日期格式并进行日期有效性的校验。 function isValidDate ( value, userFormat ) { // Set default format if format is not provided userFormat = userFormat || 'mm/dd/yyyy' ; // Find custom delimiter by excluding // month, day and year characters var delimiter = /[^mdy]/ .exec(userFormat)[ 0 ]; // Create an array with month, day and year // so we know the format order by index var theFormat = userFormat.spli

Title should be bounce up and down. Bulid up a html file called index and a css file called style. A fold named img getting the pictures. I have four part pictures for this animation. html First, a box should put all things,mainly for logos ,ball and text.  css .cont div is the parents of logos,ball and text. using position to adjust the positon of three parts. Adding animation is the main point in this project.  Must:   animation: [name] [time] [loop or none];  name whatever you like which will using later.  time usually should be any seconds.  loop make it infinite to loop or don't write anything.  animation-fill-mode:both; The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay). By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. The animat

The  HTML meta  element   represents any metadata information that cannot be represented by one of the other HTML meta-related elements ( <base> ,  <link> ,  <script> , <style>  or  <title> ). Depending on the attributes set, the kind of metadata can be one of the following: If  name  is set, it is  document-level   metadata , applying to the whole page. If  http-equiv  is set, it is a  pragma directive , i.e. information normally given by the web server about how the web page should be served. If  charset  is set, it is a  charset declaration , i.e. the charset used for the serialized form of the webpage. If  itemprop  is set, it is  user-defined metadata , transparent for the user-agent as the semantics of the metadata is user-specific.   meta  always be inside the tag head. Attributes character encoding <meta   charset = 'utf-8' > 或 <meta   http-equiv = "Content-Type"   content = "text/html; charset=