Posts

how to slice the psd for web with photoshop CC——three ways

Image
First step to become a front-end web developer is mastering how to slice the psd file and convert it to html. Here is my summary about how to do that.  The application: Photoshop CC .  The psd file which I download from the Internet. You can download my example psd file from  https://pan.baidu.com/s/1mhEAzva Way1. It's the traditional way based on the basic function in PS called slice tool. Slice each part you want like this .gif Then ctrl+shift+s or store as web format.  change the slice into all user slice. My slice file is shown below.All the pictures are saved in the file images. Way2. more advanced function called Script. export to file...  open the object file to save pictures and type as PNG-24. Then click run.wait...You may wait a while depends on the psd content and size.  Then,my slice file is shown below. Way3. The most convenient way only supplied on Photoshop CC version.   Edit>>Preferen...

How to Install package control plugin

Image
access official website to install package control  https://packagecontrol.io/ access "installation" at the right sidebar. ctrl+C copy the content of red part. open sublime .CTRL+N to open a new file,and Ctrl+~ open the control panel.Then paste the content in the input part and press Enter. wait a moment and reopen the sublime application. ctrl+shift+p open control panel and insert the words-"install",choose the one called Package control:install package. Then type the "git" ,Enter to install. Use: ctrl+shift+p insert "git add current file". Then ctrl+shift+p insert "git commit".type commit message in the file and then CTRL+W to finish. ctrl+shift+p insert "git push"to publish the content to the github. Another example is ctrl+shift+p open control panel and insert the words-"install",choose the one called Package control:install package. Then type the  "syncedSideBar" ,Enter to install. Use: wh...

sublime 常用快捷键

Image
sublime是现在主流的编辑器,是高级程序员的必备工具。 快捷键的使用让你的编程事半功倍。 Ctrl+N打开新页面 Ctrl+tab在两个页面互相转换 Ctrl+J 合并已有的两行内容 Ctrl+]向右移动一格 Ctrl+[向左移动一格 Ctrl+L选择当前行 Ctrl+C复制 Ctrl+V粘贴 Ctrl+shift+回车 不论输入鼠标位置,进入下一行 Ctrl+z返回 Ctrl+F搜索框 Alt+shift+左箭头 选中前一个字段的内容 Alt+shift+下箭头 选中光标之后字段的内容 Ctrl+shift+P打开面板 输入css等改变文件后缀名 调整缩进:ctrl+shift+p 输入reindent lines,则自动缩进 如何调整缩进绑定快捷键 :ctrl+shift+p 输入key bindings-user。在文档内输入内容:{{"keys":["shift+tab"],"command":"reindent","args":{"single_line":false}}}保存文件。 自定义 :ctrl+shift+p输入settings-user。例如可以添加更改具体内容:{"font_size:16,"line_padding_top":7},user的内容会覆盖掉default文件的设置。

foldscroll.js demo

Image
It's a 3D animation which looks amazing whatever for quotes or images.Here I  build a demo about lancome cosmetics with articles and pictures. First is layout for html page with javascript. Basically, link the css stylesheet and jquery files. The html is a section named source using javascript to add data. The javascript is divided into two parts: append data from source.js , applying foldscroll.js . Then,the css part decorates all pictures and articles look good. At last, let me describe the source.js file,adding whatever you want add into html which is easier to manage all the data.  More information can get  from  https://github.com/soulwire/FoldScroll My demo can be download from  https://pan.baidu.com/s/1hrGdJak

jarallax.js插件应用demo

Image
如何应用插件jarallax.js? 无意之间看到这款插件,觉得用起来很方便,只是制作简单的动图,形成视觉差,还是不错的选择。以下是我做的demo,是关于动画主题,Q萌的妹纸是两个png图片,文字部分保持固定。当滚动滚轮时, 两个图片会根据设置的高度进行即时滚动。 关于基本的HTML和css部分大家都可以发挥自己的想象编写。 body部分主要分为content,bg,girl1,girl2。 onload=init()是为了在body加载的时候载入JavaScript函数。 CSS就是各种设置大小,背景等内容,只要将背景设置成position:fixed,则更加容易尝试视觉差效果,用z-index将各部分层次分开,具有叠加效果。 在head部分连接外部css和jq数据库。JavaScript部分,主要是一个init函数,利用语句jarallax.addAnimation实现,括号中第一个是动画的ID或者CLASS名称,第二个是用[]包裹起来的变化。 addAnimation(selector, jarallaxKeys) version added: 0.1 selector: A string containing a jQuery selector expression. JarallaxKeys: An array containing multiple objects with a progress property and additional CSS properties. jarallax.js不断更新,每一版本都更新过一些内容。以上是我使用的最基本的,详细信息可以查看官网。 http://www.jarallax.com/?page=documentation-jarallax   

how to make money wherever you are on clixsense

Image
Only click some websites, you can earn money quickly wherever you are. at  http://www.clixsense.com   by spending only 10 minutes a day on ClixSense. So if you are looking for  ways to make money online , you need to add this way in your list as one of the option because it takes not more than 5-10 minutes of your daily time. 1. By viewing ads Get paid to view ads in the main income option in ClixSense. When you click on view ads option, you will find number of ads there. Just refer this image- 2. By Completing Surveys You can click on the  Surveys  tab, check the available surveys and complete them to earn money. You will get paid $0.5 to $1 for completing a survey. When you signup, you will get at least 3-4 surveys. 3. By completing different offers You can also earn in ClixSense by completing different types of offers. These offers are available from different types of websites. E.g. you will get paid for signup on Snapdeal, you can e...

balloon.css tooltips example

Image
The original css is from: https://github.com/kazzkiq/balloon.css First, link the balloon.css to your head,and basic main.css.Design the layout of your website,like me.  I make the DOM body>.main>.container>.pos>h2+button                                                                 >.len>h2+button                                                                 >.icon>h2+button css is  basic style, you can use whatever you like. Because of the font-awesome icon class .f, the button is different with others.To keep it look great,I restyle the .fa class css.  For positioning, use  data-balloon-pos  attribut...